How to Load jQuery in the Footer of a WordPress Website

June 6th, 2014 - Posted by Steve Marks to Javascript / jQuery, PHP, Software, Web Development.

If you’re familiar with building WordPress sites that use jQuery you may have seen it included using the following method in the header of a website:

wp_enqueue_script('jquery');
wp_head();

You enqueue the script and then when wp_head() is called, the jQuery library will be loaded for you. This is fine and works absolutely fine, however, should you ever run a site through a pagespeed checker, you may run into a reported issue like so:

Pagespeed render blocking
The above is taken from a Google PageSpeed Insights report and suggests moving all JavaScript files referenced to the bottom.

Do a search regarding how to achieve this with the in-built jQuery and you’ll probably be presented with a lot of differing solutions. This is what happened to me and I was unsure on which to use. Some worked, and some didn’t, so I wanted to share the solution which worked for me to aid others in a similar position:

The Solution

After removing the existing reference to wp_enqueue_script() as illustrated above, you can simply add the following to your theme’s functions.php file:

function my_init() 
{
    if (!is_admin()) 
    {
        wp_deregister_script('jquery');

        // Load the copy of jQuery that comes with WordPress
        // The last parameter set to TRUE states that it should be loaded
        // in the footer.
        wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', FALSE, '1.11.0', TRUE);

        wp_enqueue_script('jquery');
    }
}
add_action('init', 'my_init');

The above code is including the jQuery file that comes with WordPress. Should you wish to load a version of jQuery that sits on a CDN (which might actually be better), you can simply update the above as follows:

function my_init() 
{
    if (!is_admin()) 
    {
        wp_deregister_script('jquery');

        // Load a copy of jQuery from the Google API CDN
        // The last parameter set to TRUE states that it should be loaded
        // in the footer.
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js', FALSE, '1.11.0', TRUE);

        wp_enqueue_script('jquery');
    }
}
add_action('init', 'my_init');

Once the above has been actioned, you will see that jQuery is now being included as a result of wp_footer() being called.

Note: If you get warnings about jQuery not being initialised or similar it will more than likely be down to the order in which your JavaScript files are being Referenced. Make sure that any additional JavaScript files being used are included after wp_footer() is called.

This entry was posted on Friday, June 6th, 2014 at 6:07 pm by +Steve Marks and is filed under Javascript / jQuery, PHP, Software, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (4)
  1. Damn great job mate! I have been working on this all morning. The best post for solving how to load jquery in a wordpress footer.

  2. Lee Kimhuy says:

    Great! this is great work and easy understand.

  3. John Cahn says:

    Man, you saved me! THANK YOUUUUUUUU! :D

  4. Thanks a lot, really helped me a lot