Use modern jQuery in Wordpress

Replace jQuery in Wordpress with a modern version

Did you know that the core version of jQuery that is used on most Wordpress sites is 1.12.4 (at the time of writing)?! The 1.x branch of jQuery was released quite some time ago now (over 3 years for the most recent release at time of writing). Additionally the 1.x branch has a few known security vulnerabilities.

If your site doesn't have a really old theme or any really old plugins it might be a good idea to use a more modern version of jQuery. The current branch is up to 3.x.

Many testing tools, including Lighthouse will flag jQuery 1.12.5 as a security vulnerability as well.

WARNING: Upgrading from jQuery 1.x to 3.x may break some themes/plugins

The 2.x and 3.x branches of jQuery introduce breaking changes from v1. If you have old plugins or themes that rely on 1.x specific features, this might break your site. Consider yourself warned!

Why does Wordpress include jQuery 1.12.4?

It seems that the main reason Wordpress includes an older version of jQuery is due to backwards compatibility for themes & plugins. jQuery v1 also includes features that are backwards compatible for really old browsers like ie6/7/8. If your site has browser support targets that include these old browsers, you may want to continue using jQuery 1.12.4.

How to replace jQuery 1.12.4 in Wordpress?

The good news is, it's very easy to use a modern version of jQuery in your site. At the time of writing, the current version of jQuery is 3.4.1.

There are two ways to serve jQuery on your frontend - use the CDN version provided, or download it to your theme and serve it locally. In most cases, the recommended way would be to serve it locally.

Use jQuery from CDN

To use jQuery from CDN, add this snippet to your functions file. (Alternatively, if you don't want to edit the functions file, the Code Snippets plugin is a really easy way to add extra code like this. Also, check out our list of top wordpress plugins, which includes code snippets!)

You can find the latest CDN version of jQuery here: jQuery CDN. We're choosing the latest, minified version. The minified version is the best for production use as it has the smallest file size.

<?php

//Modern Jquery

add_action('wp_enqueue_scripts', 'nwd_modern_jquery');

function nwd_modern_jquery() {
    global $wp_scripts;
    if(is_admin()) return;
    $wp_scripts->registered['jquery-core']->src = 'https://code.jquery.com/jquery-3.5.1.min.js';
    $wp_scripts->registered['jquery']->deps = ['jquery-core'];
}

Use modern jQuery locally

The preferred option is to serve a modern jQuery version from your site. This minimises requests to different origins which can speed up delivery of your site. It also allows you to serve jQuery from your own CDN if you implement one.

You will need file/ftp access to do this.

1. Download modern jQuery into your theme

Head to the jQuery site: jQuery download

Download the compressed, production jQuery

You can place this file anywhere in your theme you like. I usually recommend creating a folder in your theme called vendor for third party libraries, e.g.

/wp-content/themes/<yourtheme>/vendor/jquery-3.5.1.min.js

2. Enqueue modern jQuery from your theme

Add the following snippet into your functions.php or into a Code Snippet using the Code Snippets plugin:

<?php

//Modern Jquery
add_action('wp_enqueue_scripts', 'nwd_modern_jquery');
function nwd_modern_jquery() {
    global $wp_scripts;
    if(is_admin()) return;
    $wp_scripts->registered['jquery-core']->src = get_stylesheet_directory_uri() .'/vendor/jquery-3.5.1.min.js';
    $wp_scripts->registered['jquery']->deps = ['jquery-core'];
}

Note: if you have a different version of jQuery to 3.4.1, or if you downloaded jQuery to a different location in your theme, you will need to change this line;

<?php

$wp_scripts->registered['jquery-core']->src = get_stylesheet_directory_uri() .'/vendor/jquery-3.5.1.min.js';

To reflect the correct file location and name.

Test!

You should now have a modern version of jQuery on the frontend of your site. Congratulations! Don't forget to test it - browse to the frontend of your site and look for the <script> tag containing jQuery. You should no longer have the version from Wordpress core and should have the version you just added. Also open your dev tools and browse the site to look for javascript errors. Many plugins and themes are poorly written! There may well be issues.