I use carousel plugin that depends on jQueryUI. To have it loaded I simply use Load jQueryUI addon from marketplace.
Edit - To be more exact. What happens is:
A. when problematic.js is loaded directly - without any if: carousel doesn't work when user is logged in and content of top bar ("Edit", "Dashboard") dissapers, so it is even impossible to go into Edit Mode
B. when problematic.js is loaded with such condition:
if (!$c->isEditMode()){ ?>
<script type="text/javascript" src="problematic.js"></script>
<?php } ?>
exactly as above: carousel doesn't work when user is logged in and content of top bar ("Edit", "Dashboard") dissapers, so it is even impossible to go into Edit Mode
C. when problematic.js is loaded with such condition:
<?php $u = new User();
if (!$u->isRegistered()){ ?>
<script type="text/javascript" src="problematic.js"></script>
<?php } ?>
content of top bar is present, it is possible to turn page into Edit Mode but obviously js file is not executed when user is logged in.
However that's not what I need - I want my script to be working when:
user is not logged,
user is logged into website but page IS NOT in edit mode.
I want script NOT to be executed when page IS in Edit Mode ONLY.
How should I achieve this?
Edit: Here's part of PHP/HTML code:
<?php
defined('C5_EXECUTE') or die(_('Access Denied.'));
?>
<!DOCTYPE html>
<html>
<head>
<?php Loader::element('header_required');?>
<script type="text/javascript" src="<?php print $this->getThemePath(); ?>/js/respond.min.js"></script>
<script type="text/javascript" src="<?php print $this->getThemePath(); ?>/js/jquery.ui.rcarousel.min.js"></script>
<?php $u = new User();
if (!$u->isRegistered()){ ?>
<!-- To prevent conflicts with C5 jQuery UI when in edit mode -->
<script type="text/javascript" src="<?php print $this->getThemePath(); ?>/js/home.js"></script>
<?php } ?>
<link rel='stylesheet' type='text/css' href="<?php print $this->getStyleSheet('css/style.css'); ?>" />
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1' />
</head>
<body <?php if ($c->isEditMode()) { ?> class='editmode' <?php } ?>>
<div class='c5wrapper'>
<div id='container'>
<div id='content-promo' class='content-promo full-width'>
<div id='carousel-wrapper' class='content-promo carousel-wrapper'>
<?php
$a = new Area('Carousel');
$a->display($c);
?>
</div> <!-- End of carousel wrapper -->
<a href='#' id='ui-carousel-prev' class='carousel-controls'><span class='carousel-control-text'>Prev</span></a>
<a href='#' id='ui-carousel-next' class='carousel-controls'><span class='carousel-control-text'>Next</span></a>
</div> <!-- End of content promo -->
<?php $this->inc('elements/footer.php'); ?>
How does the first code example not work? It doesn't do what you expet? Or it doesn't do anything at all? Assuming that it functionally works (ie, adds that tag when not in edit mode), then the full solution to what you want to do would be:
<?php $u = new User();
if ($u->isRegistered() && ! $c->isEditMode()) { ?>
<script type="text/javascript" src="problematic.js"></script>
<?php } ?>
If the first code example doesn't work, then it's possible $c has been redefined, or something else equally unlikely...
Related
I am trying to show some WP content but only the static text is showing. No WP content is appearing at all.
It does appear that no WP scripts are being loaded looking at the Dev Tools source code?
Any help as to what I have missed is most appreciated.
Here is my call within page.php:
<iframe src="http://www.xxxxxx.com/wp-content/themes/themename/iframe-gview.php" width="100%" height="500" frameBorder="0"></iframe>
My php template code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Applications</title>
<?php wp_head(); ?>
</head>
<body>
<link rel="stylesheet" type="text/css" href="http://www.xxxxxx.com/wp-content/themes/themename/assets/css/style.css">
Static Content
<?php
echo do_shortcode('[gravityview id="1234"]');
?>
<?php wp_footer(); ?>
</body>
</html>
as #vel mentioned above, this solved my problem:
<?php require_once('../../../wp-load.php'); ?>
I need to change the css of the home page only, I have googled and a lot of the suggestions were to add the page id as part of the css selector. But when I try it, it doesn't seem to work? I want to change the class ".contentclass" and the pages id is "599" so here's what I've tried:
.post-id-599 .contentclass {}
.page-id-599 .contentclass {}
.body-id-599 .contentclass {}
none of them seems to be working...
Link to the webpage I'm working on: Link
Try using the right click "inspect element" or equivalent for your browser.
When I look at your site I see something like this
<body class="page page-id-624 woocommerce-cart woocommerce-page boxed varukorg" style="">
So for example for this page:
http://witdesign.se/wp/varukorg
you would use
body.post-id-624 .contentclass {}
Any styles within the braces will be applicable to the pages with a body class of post-id-668
To be sure, you will need to check what renders in your browser using an inspector.
If your theme uses body_class() in the body tag, you will have a specific css class for the front page (.home), which you could use in the stylesheet;
Example (might be different for your theme):
.home #content .entry { color: #123edf; }
to overwerite the genral stylesheet style.css, you could use a conditional statement in header.php to link a specific stylesheet for the front page:
Example:
<?php if( is_home() ) { ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/front-style.css" />
<?php } ?>
the code needs to be after the link to the general stylesheet.
(instead of is_home() you might need to use is_front_page() )
Check: Conditional_Tags and get_stylesheet_directory_uri
--
alternative, to load a different stylesheet instead of the general stylesheet, use the conditional statement with an else:
(this code would replace the link of the general stylesheet)
Example:
<?php if( is_home() ) { ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/front-style.css" />
<?php } else { ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<?php } ?>
I am new to wordpress.. I have installed my theme named 'hare'. Now I want to add some javascripts files as well as css files into the index.php page. But I am not finding the desired output.
following is the code i have written..
<?php get_header(); ?>
// Some content
<?php get_footer(); ?>
<!-- JQuery libs
================================================== -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- js jQuery wait for images Plugin ====================== -->
<script src="<?php bloginfo(template_directory ); ?>/javascripts/jquery.waitforimages.js"></script>
<!-- js jQuery flexslider Plugin ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jquery.flexslider-min.js"></script>
<!-- jQuery Cycle Plugin ====================================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jquery.cycle.all.js"></script>
<!-- jQuery Cycle Plugin ====================================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jquery.fullscreen-min.js"></script>
<!-- js jQuery jcarousellite Plugin ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jcarousellite_1.0.1.min.js"></script>
<!-- js Fancybox Plugin ================================= -->
<link rel="stylesheet" href="<?php bloginfo(template_directory); ?>/javascripts/fancyBox-2/jquery.fancybox.css">
<script src="<?php bloginfo(template_url); ?>/javascripts/fancyBox-2/jquery.fancybox.pack.js"></script>
<!--fancybox helpers-->
<link rel="stylesheet" href="<?php bloginfo(template_directory); ?>/javascripts/fancyBox-2/helpers/jquery.fancybox-buttons.css"/>
<script src="<?php bloginfo(template_url); ?>/javascripts/fancyBox-2/helpers/jquery.fancybox-buttons.js"></script>
<!-- js jQuery qtip plugin ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/jquery.qtip-1.0.0-rc3.min.js"></script>
<!-- toTop ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/goToTop.js"></script>
<!-- js jQuery my own functions ====================== -->
<script src="<?php bloginfo(template_url); ?>/javascripts/functions.js"></script>
<!-- <script src="javascripts/jquery.tweet.js"></script> -->
<!-- JS twitter scripts ================================== -->
<script src="http://twitter.com/javascripts/blogger.js"></script>
<script src="http://twitter.com/statuses/user_timeline/EnvatoWebDesign.json?callback=twitterCallback2&count=5"></script>
<!-- End Document
================================================== -->
</body>
</html>
Is my this way is correct??
If not then please correct me..
Thank you in advance
In your comments you may be referring to these guidelines from yahoo. There are, however a few caveats to this rule. Most importantly, Google Analytics prefers it's snippet be placed within the <head> section and won't allow you to use Analytics for Webmaster Tools authentication unless the snippet is in head.
More importantly, you don't want to include your JS and CSS files directly in your theme templates like this. It works, but it is very un-WordPress-y.
The "correct" way to include additional scripts and styles in a WordPress theme is to use the wp_enqueue_script() and wp_enqueue_style() functions within a hook in functions.php, like so:
function my_custom_styles_function() {
wp_enqueue_style( 'my-style', get_stylesheet_directory() . DS . 'javascript' . DS . 'my-plugin' . DS . 'my-plugin-style.css', array(), '1.0' );
...
}
add_action('wp_enqueue_scripts', 'my_custom_styles_function');
WordPress actually has jQuery included by default, although without the $ shortcut established. You can use WordPress's jQuery and start all of your custom scripts with jQuery(...); instead of $(...); but this can cause problems for some plugins. If you want to include your own version of jquery, you should first use wp_dequeue_style() to dequeue the "built-in" jQuery.
Finally, if you do want to include you scripts in the footer, the wp_enqueue_script() function has a flag, $in_footer to defer particular scripts to the footer.
The answer provide by #qccreative is the right one. You should include all the js/css files you need to your page using the functions.php file that you must have within your theme. if you dont have it just create one and make a function for import your files just like the answer above.
you can even manage in what page you want to load your scripts.
also this is the safest way WP provide for including scripts in an organized way.
this hook that wordpress provide WP_ENQUEQUE_SCRIPTS its a function that will add the scripts within your action to the site.
heres another example:
function load_javascript_files(){
wp_register_script( 'jquery-accordion', get_template_directory_uri() . '/js/jquery.accordion.js', array('jquery'),true );
wp_enqueue_script('jquery-accordion');
}
add_action('wp_enqueue_scripts', 'load_javascript_files');
Good luck buddy
From the code you have put you would create a header.php file in your themes folder and include the JS in there. An example would be like follows:
`<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo( 'name' ); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="<?php bloginfo( 'template_url' ); ?>/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="<?php bloginfo( 'template_url' ); ?>/jQuery-validate.js" type="text/javascript"></script>
<link rel="stylesheet" href="<?php bloginfo( 'template_url' ); ?>/style.css" type="text/css" />
<?php wp_head(); ?>
</head>
<body>
/**
* Proper way to enqueue scripts and styles.
*/
function custom_links() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'custom_links' );
If you need to linked your CSS file than you can use wp_enqueue_style and if you need to linked JavaScript than you can use wp_enqueue_script.
wp_enqueue_scripts this is work on frontend side of wordpress.
admin_enqueue_scripts this is works on backend side of wordpress.
I hope it's help to all people.
I've got a helper method which renders some html along with the required css and js links. I am simply concatenating all the html tags and returning the built string. The helper method is something like this:
function display_linkPreview($data = array())
{
$return = "<link rel=\"stylesheet\" class=\"cssStatics\" type=\"text/css\" href=".base_url()."assets/css/stylesheet.css\" />
<script type=\"text/javascript\" src=".base_url()."assets/js/linkPreview.js\" ></script>
<div>blah blah<div></div></div>";
return $return;
}
And this is the way I am going to render the outpt of display_linkPreview in one of the views:
echo display_linkPreview($body);
The problem is that all the output of display_linkPreview, including the <link> and <script> tags will be rendered in the middle of HTML page where I have called echo. How can I modify display_linkPreview to add css and js tags to the <head> of html?
You could use template style viewing, for example, you have main.php
<html>
.
.
<?php echo $linkPreview ; ?>
</html>
<body>
.
.
<div id='main'><?php $this->load($main); ?></div>
</body>
And your controller could look like this:
.
.
$data['main'] = "myview";
$data['linkPreview'] = display_linkPreview();
$this->load->vars($data);
$this->load->view('template/main');
try this link_tag. this will help you to link the css and js.
Something like this.
<html>
<head>
<title></title>
<?php echo link_tag('resources/style.css');?>
</head>
<body>
<?php
?>
</body>
</html>
here resources is the folder that contains the css file stlye
I am using this in my viewregistration.php file
<html>
<head>
<link rel="stylesheet" type="text/css" href="<?php echo $base_url; ?><?php echo $css; ?>reg_style.css" />
<link rel="stylesheet" type="text/css" href="<?php echo $base_url; ?><?php echo $css; ?>style.css" />
</head>
<body>
<?php $this->load->view('include/header');?>
<?php $this->load->view('registration_view.php');?>
<?php $this->load->view('include/footer');?>
</body>
</html>
And I am calling it in my conltroller as
$data['title']= 'Registration';
$this->load->view("viewregistration.php", $data);
And in my controller I am using
parent::__construct();
$this->load->helper('url');
$this->load->helper('form');
$this->load->database();
$this->load->model('user_model');
$this->load->model('systemdata');
$this->data['css'] = $this->systemdata->get_css_filespec();
$this->data['scripts'] = $this->systemdata->get_scripts_filespec();
$this->data['base_url'] = $this->systemdata->get_base_url();
But the css file is not loading. It show some error like
A PHP Error was encountered
Severity: Notice
Message: Undefined variable: base_url
and
A PHP Error was encountered
Severity: Notice
Message: Undefined variable: css
What I am doing wrong?
I have used autoload url helper. But the result remains same.
Your variables aren't defined because you're not actually passing them to your view. $data and $this->data are not the same thing.
Here, you are correctly passing the $data array to your view:
$data['title']= 'Registration';
$this->load->view("viewregistration.php", $data);
But notice here how you're assigning your variables to $this->data, which never gets passed to the view:
$this->data['css'] = $this->systemdata->get_css_filespec();
$this->data['scripts'] = $this->systemdata->get_scripts_filespec();
$this->data['base_url'] = $this->systemdata->get_base_url();
You either need to assign your variables to $data or pass $this->data to your view.
I dont think this line is necessary.
$this->data['base_url'] = $this->systemdata->get_base_url();
What you can do instead, is this.
<link rel="stylesheet" type="text/css" href="<?php echo base_url($css.'reg_style.css'); ?>" />
base_url() is a CI function that gives you, the base url.
Sources: http://codeigniter.com/user_guide/helpers/url_helper.html