Including Jquery In WordPress

I am not sure you guys have the same problem. I tried this, every time it gave me different results.

Using <?php wp_enqueue_script("jquery"); ?> before wp_head to call the jquery library to avoid duplication. But, sometimes it doesn’t work.

Also, I tried this var $j = jQuery.noConflict(); and using $j as shortcut for jQuery. However, sometimes it shows me “undefined variable”.

I am not a JavaScript guru, so I need some advices from you

I’m no javascript guru either. So I’m sure someone else has a better explanation and/or solution.

I include the <?php wp_enqueue_script("jquery"); ?> as well, as this loads the jquery libraries so you don’t have to include them yourself.

When using $j = jQuery.noConflict(); you need to apply the $j variable to the code within the javascript files as well, not just the part that may be within your header or footer. Also $j = jQuery.noConflict(); should be changed for each javascript file e.g. $slider = jQuery.noConflict(); and $menus = jQuery.noConflict();.

I’m not a guru either, but I had this problem once and had to resort to using the following in my theme’s functions.php file to fix it:

function load_theme_scripts() {
    wp_enqueue_script('jquery', '/wp-includes/js/jquery/jquery.js', '', '', true);            
}    

add_action('init', 'load_theme_scripts');

The second set of single quotes is simply a hack to make sure that it’s loaded in the footer like I wanted it to be, because anything defined as a dependency in WordPress’ wp_default_scripts() function, will be overridden even if you use the TRUE at the end to make it load in the footer.

At any rate, by adding it into my theme’s functions.php file I was able to get it to load finally… I have no idea why it wouldn’t work before the wp_head() call, but this worked for me.

@GhostPool: I have $j = jQuery.noConflict(); and I use the $j to replace the original $.

@Eight7Teen: I understand that for performance wise, loading js in the footer is a good option, but if we have several js plugins. What will happen? Also, my problem is actually the $j sign sometimes not working properly. It return “undefined variable” even I have no.Conflict and replace the $ sign.

You’d just have to make sure that they’re loaded after the wp_footer() call to make sure that jQuery was loaded first.

I guess I misunderstood your first post, I had thought you were saying that wp_enqueue_script() wasn’t loading jQuery as it should.

I’ve never bothered with using $j = jQuery.noConflict(); because the version of jQuery that’s loaded in by WP is automatically in noconflict mode. So instead, I just write all my jQuery functions like so:

(function($) {
    // Yummy jQuery stuff goes here
})(jQuery);

You include JQuery above the wp_head like this:

<?php wp_enqueue_script(‘jquery’); ?>

Most important is when you call some JQuery functions you do it like this:

jQuery(document).ready(function(){ jQuery(“div.topnav ul”).superfish({ animation: {opacity:’show’,height:’show’}, // fade-in and slide-down animation autoArrows: true, // disable generation of arrow mark-up dropShadows: false // disable drop shadows }); });

So every dolar sign $ must be replaced with jQuery in order to work with wp.

Most important is when you call some JQuery functions you do it like this:

jQuery(document).ready(function(){ jQuery(“div.topnav ul”).superfish({ animation: {opacity:’show’,height:’show’}, // fade-in and slide-down animation autoArrows: true, // disable generation of arrow mark-up dropShadows: false // disable drop shadows }); });

So every dolar sign $ must be replaced with jQuery in order to work with wp.

You can do it that way, but by using the method I showed above:

(function($) {
    // Yummy jQuery stuff goes here
})(jQuery);

jQuery is contained within it’s own namespace, and as such, you can use the $ in your functions without it impeding on any other javascript libraries.

@Mladjo: Yes, I did tried what you mentioned, but sometimes it is not working properly.

@Eight7Teen: So you don’t need the no.Conflict thingy?

Since we’re on this topic, I have a question too.

How do you load jQuery in Wordpress from Google API ?

I’ve tried with wp_enqueue_script(‘jquery’) before wp_head(), but still, if there’s a plugin that needs jQuery, it will load it in the wp_head() section as well, so I have 2 calls to jQuery: one from the WP core, and one from Google.

I just need to disallow jQuery to be called in the wp_head() section, and load it from Google instead (since most visitors will have it cached just by visiting a Google site…)

If anyone can help, please

@Kailoon: No, you don’t need the no.conflict declaration because since v2.7 or 2.8, WordPress automatically loads jQuery in noconflict mode… So there’s no need to declare it again.

@digitalimpact: Why not just modify where wp_enqueue_script() loads jQuery from?

You can do that easily by adding this to your theme’s functions.php file:

function redefine_jquery() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http:// ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'redefine_jquery');

I had to edit the above because the forums were turning the location of google’s jquery into a link… So be sure to remove the blank space between http:// and ajax.googleapis