May 6th

Load jQuery from Google in your WordPress template

2011, 08:00 UTC | By | In wordpress
Leave a comment | Trackback  | 2595 views

There are several advantages of loading jQuery and other big JavaScript libraries from a CDN (Google in our case).

  • It can save you some traffic. While jQuery isn't exactly big, jQuery-core and jQuery-ui are about 80K together, even when using the minified versions of the libraries.
  • it saves 1 (or 2, in case you also need jQuery-ui) HTTP requests per page view on your server. Doesn't sound like the big deal, but on a busy site, it can make some difference.
  • Even if your server is powerful enough, most browsers limit the number of simultaneous requests they make for one server. Spreading the load to multiple servers can reduce the page loading time for visitors, no matter how powerful and fast your server is.
  • You are no longer limited to the jQuery version that comes with WordPress. While it is usually sufficient, there may be situations in which using a more recent version can be beneficial.
  • And last, but not least: Google has more bandwidth than you. Always :)

WordPress 3.x comes bundled with jQuery 1.4.4. The WordPress back end heavily uses jQuery and jQuery-ui and for the back end, you should always stick with the bundled version. By default, your frontend templates will also use the bundled version, but this can be changed.

However, you cannot simply put a new <script> tag in your header.php template and load a different jQuery version from Google's CDN. Doing so will probably cause issues, because your pages will try to load 2 different versions of jQuery and even if it would not cause any issues, it's still a big waste and a way to slow down your site.

Disable the default inclusion of jQuery

WordPress outputs all enqueued scripts when it runs wp_head() which it usually does in your header.php template. By default, jQuery will be on the list of scripts and before you can put your own version in the header, you need to remove it. The easiest (and probably only supported and recommended) method is a template hook that runs before your page is sent to the client, but after WordPress has been initialized. The correct hook to use is template_redirect.

So, you can put something like the following in your functions.php.

function theme_postinit() {
        wp_deregister_script('jquery');
}
add_action('template_redirect', 'theme_postinit');

This will prevent WordPress from loading jQuery in the header, no matter what other plugins dictate. Any well written plugin should use wp_enqueue_script() to load scripts and if you perform the wp_deregister_script() call, it will always work.

Now you can manually put the following in your header.php.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>

The correct URI for loading jQuery from Google is always http://ajax.googleapis.com/ajax/libs/jquery/VERSION/jquery.min.js. Unless you need to debug your own scripts, using the minified script is always a good idea. For debugging and testing purpose you may want to change this temporarily by replacing jquery.min.js with jquery.js. Do not forget to replace VERSION with the desired version number (1.5.2 in our code example above).

Alternate way of loading the script

While it's perfectly ok to modify header.php and load the script there, it is not the recommended way. If you really want to do it like it should be done by using the supported APIs, do not modify your header.php but instead do everything in the template setup hook(s).

function theme_postinit() {
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js', false, '1.5.2');
        wp_enqueue_script('jquery');
}
add_action('template_redirect', 'theme_postinit');

Note that using the template hook template_redirect will not remove the bundled jQuery from your admin (back end) templates. This is exactly what we want - keep the bundled jQuery for the administration area of WordPress, because replacing it with a different version could result in compatibility issues and indeed it does - a quick test with WordPress 3.1.2 revealed that replacing the bundled jQuery with version 1.5.2 breaks quite a few things, including the editor. So make absolutely sure to use one of the methods described here to keep your admin area intact.

If you deliver your pages via https, you should also load jQuery via https. This is possible - simply change the Google URI to https.

The exact same method works for jQuery-ui with the exception that jQuery-ui is normally not used for the front end unless you have installed a plugin that queues up jQuery-ui.

Also note that quite a few plugins are improperly written and may break the entire thing. To ensure everything can work how it should, it might be a good idea to check all your plugin settings and disable any option for loading jQuery you can find.

1 Like Like
 

1 responses to: Load jQuery from Google in your WordPress template

  1. I needed to thank you for this wonderful read! ! I absolutely enjoyed every little bit of it. I've got you saved as a favorite to look at new things you post by  Funny Pictures Dojo, Mar 5th, 2012 at 10:49
    Reply | Quote | #2

    I needed to thank you for this wonderful read!! I absolutely
    enjoyed every little bit of it. I've got you saved as a favorite to look at new things you post

Subject

  (this is optional)

Comment text

Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>