WordPress: Loading jQuery correctly, version 2

A few months ago I posted a bit of code to properly load jQuery within WordPress, the original issue (which existed on 50% of WordPress sites I looked at that day) was jQuery being loaded twice. This issue would cause extra weight to download for the user, but most of the solutions would remove jQuery from WordPress’ resource queue without putting something back to satisfy other scripts that depend on jQuery.

Since my first version I’ve further improved the jQuery / WordPress fix, ironing out a few issues I found making this a simper and less restrictive fix, in this post I address these issues and demonstrate an improved method of loading jQuery into your WordPress theme.

Issues with the previous version

• Generating protocol relative URLs in PHP is a bit of a pain
• Difficult to provide fallback jQuery file
• Too much emphasise on functions file instead of theme file

How do we solve these issues?

Easy, go back to loading jQuery in your themes footer.php file, load it how you used to in the good old days… just like the example given in the HTML5 boilerplate:

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.4.min.js"></script>')</script>

We still need to register jQuery with WordPress, so my first thought was to load an empty ‘dummy’ js file, however WordPress doesn’t actually need to load a file to register jQuery as an available dependancy. With that in mind look here’s the improved fix:

function load_jquery() {

    // only use this method is we're not in wp-admin
    if ( ! is_admin() ) {

        // deregister the original version of jQuery
        wp_deregister_script('jquery');

        // register it again, this time with no file path
        wp_register_script('jquery', '', FALSE, '1.6.4');

        // add it back into the queue
        wp_enqueue_script('jquery');

    }

}

add_action('template_redirect', 'load_jquery');

Notice we’ve deregistered the original version, registered a new version (which just so happens to have no file associated with it), then placed it back in the queue. Now any other JavaScript files that depend on jQuery will load, as WordPress recognises the dependancy (jQuery) has been set. I also figured we’d need to keep the version number in there just in case another script references a specific version dependency.

A good example of a WordPress plugin that has JavaScript files that depend on jQuery is Contact Form 7, of which loses it’s ability to submit using AJAX is jQuery isn’t in WordPress’ resources queue.

With this new fix you can load jQuery however you like in your theme, thus kicking the arse of all of the issues I raised at the start of the post! The improvement from the original version seems pretty good although I haven’t been running for that long.

As always comments are welcome, especially if you spot an issue or think this can be further improved.