How To Update or Remove jQuery in WordPress

How To Update or Remove jQuery in WordPress

The core version of jQuery used on most WordPress websites is 1.12.4. This version of jQuery was released in 2016 and is now significantly outdated with know security vulnerabilities. If you have used any website testing tools such as Lighthouse, during the test it will flag that your WordPress website includes front-end JavaScript libraries with known security vulnerabilities by using the current version of jQuery.

According to the WordPress developers the older version of jQuery is used to provide backwards compatibility for themes and plugins as 1.12.4 includes features that provides compatibility for older browsers.

If your website doesn’t use a particularly old theme or plugins it would be advisable to update the core version of jQuery to a more up to date version. As of writing the most current version of jQuery is 3.4.1.

IMPORTANT When you update the jQuery version used from 1.12.4 to 3.4.1 in WordPress, you may break some themes or plugins that you use. We would highly recommend you throughly test your WordPress website after updating jQuery to ensure that your theme and plugins are working as expected.

In this guide we will discuss how to update the core version of jQuery by removing the old 1.12.4 version and replacing with current 3.4.1 version. We will also document how to completely remove jQuery from your WordPress website if you are using a theme such as GeneratePress, which doesn’t require jQuery.

IMPORTANT In this tutorial, we'll be directly editing WordPress theme files and we recommend that you create a child theme of your existing parent theme. By using a child theme you will be able to apply modifications without altering the parent theme files and ensuring any changes you make are kept following any parent theme updates.
TIP If you don't feel comfortable with editing the functions.php file directly, we would recommend you use the Code Snippets plugin. This plugin will enable you to easily add, manage and delete WordPress code snippets from your dashboard. To find out more about adding custom code snippets using a plugin see our tutorial How to Add Custom Code Snippets to WordPress with the Code Snippets Plugin for more information.

How to Update jQuery to Latest Version

In order to update the version of jQuery used we will making use of the functions.php file. You can edit the functions.php file directly in the WordPress dashboard under Appearance > Theme Editor > Theme Functions or edit the file offline and upload using your favourite FTP client.

Now you’ll need to edit the functions.php file to copy and paste the following code. Once you have added the, click the Update File button and your WordPress website will now deregister the older version of jQuery and download the most recent version from the jQuery CDN.

// Install jQuery 3.4.1 - jQuery CDN
function vpsb_custom_jquery() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', ("https://code.jquery.com/jquery-3.4.1.min.js"), false);
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'vpsb_custom_jquery');

You can download jQuery using the japery CDN as above or if you prefer to load the jquery file using Google CDN you can copy and paste the code below.

// Install jQuery 3.4.1 - Google CDN
function vpsb_custom_jquery() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"), false);
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'vpsb_custom_jquery');
TIP If you are using any WordPress plugins such as LSCache, W3 Total Cache or WP Super Cache you must make sure to clear the cache.

In the custom code snippet above you’ll notice we have use used three different functions. The wp_deregister_script deletes the previously registered script, wp_register_script registers the script to be connected but doesn’t automatically loaded it and wp_enqueue_script loads the script for the all website, themes and plugins. At the end of the wp_register_script we use false. This will tell WordPress to download the script and add it to the header, if you wanted to change it the script to be downloaded and added to the footer instead you simply need to change false to true.

In addition to serving the files using either jQuery or Google’s CDN, you can download the jQuery file and serve it locally from your WordPress website. However, we prefer to use the code above as we can update to the latest version quickly and efficiently by simply changing the wp_register_script address without having to download it each time there is an update.

That’s it. You have now successfully removed the older jQuery version and your WordPress website will now be running the latest version of jQuery from either the jQuery or Google CDN.

How to Remove jQuery

If your WordPress website uses a theme such as GeneratePress you’ll find that it has no use or reliance towards jQuery and it can be safely disabled without effecting the theme. However, it is important to note that this will effect any plugins you use that have a dependency on jQuery and we recommend you throughly test any changes in a development environment.

To disable jQuery completely from your WordPress website simply edit your functions.php file and copy and paste the following code:

// Remove jQuery
function vpsb_remove_jquery() {
    if (!is_admin()) {
        wp_deregister_script('jquery');
        wp_register_script('jquery', false);
    }
}
add_action('init', 'vpsb_remove_jquery');

That’s it. You have now successfully disabled jQuery on your WordPress website.

VPSBasics

VPSBasics

This guide was written by the VPS Basics editorial team, led by Gilberto Van Roosen. They are a unique blend of people who are dedicated to providing highly detailed, comprehensive and easy to follow tutorials, written in plain English. They specialise in tutorials for managing Linux servers, its software and WordPress.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.