How to Change the jQuery Version in WordPress

JQuery is probably the most commonly used JavaScript library in WordPress. It underpins many of the advanced features from sliding galleries, to certain ajax implementations. In addition, lots of plug-ins require jQuery to provide their fancy effects. It’s hardly an exaggeration to say that there is no major blog that doesn’t use jQuery in some form or the other. However, it is a continuingly changing library. New functions appear and old ones get deprecated as per the prevailing best practices of the time. As a result, the versions keep changing. What if you want to use a particular plug-in that requires a specific version of jQuery? How do we force WordPress to changed the jQuery version in place of the default one? Luckily, this can easily be accomplished using filters and a CDN source for the JavaScript libraries.

If you load a page on your WordPress blog and check the source by pressing Ctrl+U in most major browsers, you can find the current version of jQuery by searching the HTML. For example, my test site uses version 1.11.0 as shown in the screenshot below.

To change it, we need to follow three steps:

1. Determine which version we want;
2. Get the appropriate URL from the Google Libraries;
3. Use a filter hook to replace the old one.

Determine which Version we Want

Most of the time you will be alerted to the need for a different version of jQuery by a plug-in that doesn’t work and by the errors in the JavaScript console. By contacting the plug-in author, you might be able to figure out which version is required. For purposes of this example, let’s assume we want to use version 2.0.2 instead.

Get the Version URL from Google

There are many companies that maintain copies of open source libraries like jQuery. In addition to providing the code freely, they also host it on powerful servers across the world that act as Content Distribution Networks or CDNs. They deliver the files to users around the world far more quickly and efficiently than your site ever could. This makes yet another reason for you to use the CDNs since your blog pages will load faster on a visitor’s browser.

Google is one such CDN and the host all the popular versions of jQuery with each having a separate URL. The structure of the URL looks like this:

ajax.googleapis.com/ajax/libs/jquery/[version_number]/jquery.min.js

Just replace [vesion_number] with the one we are looking for. The Google CDN hosts versions as old as 1.2.3 and as recent as 2.1.0 (as of this date). So for our example, the URL we are looking for will be:

ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js

Using Filters to Change the jQuery Version

If your theme has been coded properly, it has used the wp_enqueue_script command for including the jQuery library. Most good themes do this nowadays so it shouldn’t be a problem. Open up your functions.php file and append the following code to the bottom:

function modify_jquery_version() {
    if (!is_admin()) {
        wp_deregister_script('jquery');
        wp_register_script('jquery',
'http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js', false, '2.0.s');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'modify_jquery_version');

I have detailed in an earlier tutorial how to properly include JavaScript into WordPress. Accordingly, I have first deregistered the existing version of the “jquery” hook and introduced the new one with the new URL instead. As for the parameters, I have specified that there are no dependencies and also that this is version 2.0.2 which will be appended as a query string.

Save functions.php, reload a page from your WordPress blog and check the source once more. As you can see in the screenshot below, the jQuery version has been replaced with the one we want from the Google CDN.

This is a safe and scalable way to modify any JavaScript library in WordPress and not just jQuery. We’re lucky that it’s open source and that there are so many CDNs available from which we can choose.