How to Add & Use jQuery Scripts in WordPress

Interactive page elements like dynamic search bars, advanced product filters, and sliders can make your site more user-friendly and engaging. But it’s impossible to create any of these features without using JavaScript or installing WordPress plugins.

Luckily, you can easily create JavaScript design elements by using jQuery in WordPress. You can do this manually or use a plugin to speed up the process.

In this post, we’ll introduce you to jQuery and discuss why you may want to use it. Then, we’ll show you two ways to add custom jQuery scripts to your WordPress site and cover some frequently asked questions. 

What is jQuery? (and why you may want to use it)

Before you learn how to add jQuery scripts in WordPress, you’ll need a baseline understanding of jQuery itself. 

In a nutshell, jQuery is a lightweight, open-source JavaScript library that simplifies the way you can write and use this coding language.

It enables you to easily modify and enhance WordPress themes and plugins using JavaScript. This feature can be extremely helpful since JavaScript is essential for many features. 

For example, you need JavaScript for Ajax, event handling, and DOM transversal/manipulation. Ajax functionality, in particular, is practical and popular. Web developers use it to create instant search loading and advanced ecommerce product filtering.

An action from the user, like a click or a search, often triggers these JavaScript features. You also need jQuery to create additional client-side features like sliders, lightbox pop-ups, and more.

Is jQuery included in WordPress by default?

jQuery is such a useful and popular resource that comes included in your WordPress installation by default. You just need to know how to use it! In the next sections, we’ll teach you how to do this. 

What to do before adding jQuery scripts to WordPress

We’ll soon explain how you can add jQuery scripts in WordPress. But first, you should do a few things to safeguard your website before attempting to modify its core files.

Most importantly, it’s always recommended to create a backup of your site. That’s because even the slightest coding error to critical website files can do serious harm. When you make backups, you can easily restore your site to its previous state in an emergency.

If you’re not sure how to back up your WordPress site, or you’re just looking for a tool to streamline the process, Jetpack VaultPress Backup is an excellent option.

Jetpack VaultPress Backup automatically saves every change on your site. Then you can use one-click restores to recover your content quickly. Jetpack even allows you to restore your site from the Jetpack mobile app. Furthermore, if you run into any issues, you can get assistance from the best-in-class customer support — Happiness Engineers! 

To further protect your website, it’s also worth creating a WordPress staging site. Then, you can test your changes before pushing them live.

How to add custom jQuery scripts to WordPress

Now that you know more about jQuery and preparing your site for major changes, let’s discuss two ways to add custom jQuery scripts to WordPress!

Method 1: Add jQuery manually

First, we’ll show you how to add jQuery to WordPress manually. This method might be for you if you have some development experience and want full control over the process. 

It’s worth using a child theme so that any changes you make won’t be overridden when you update your theme. 

Step 1: Go into Compatibility Mode

One of the great things about jQuery is that it allows you to use some familiar shortcuts when coding. Most notably, you can use the $ symbol to represent jQuery. This can save you a lot of time, but some other libraries use this shortcut to represent something different.

Therefore, you’ll want to go into Compatibility Mode and create a unique alias for jQuery. This way, you will avoid conflicts with other libraries. 

You can do this using the following code:

<!-- Putting jQuery into no-conflict mode. -->

http://prototype.js

http://jquery.js

<script>

var $j = jQuery.noConflict();

// $j is now an alias to the jQuery function; creating the new alias is optional.

$j(document).ready(function() {

    $j( "div" ).hide();

});

// The $ variable now has the prototype meaning, which is a shortcut for

// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.

window.onload = function() {

    var mainDiv = $( "main" );

}

</script>

When you action the above script, you’ll be able to use $j as a shortcut instead of $. Alternatively, you could use the following:

<!-- Loading jQuery before other libraries. -->

http://jquery.js

http://prototype.js

<script>

// Use full jQuery function name to reference jQuery.

jQuery( document ).ready(function() {

    jQuery( "div" ).hide();

});

// Use the $ variable as defined in prototype.js

window.onload = function() {

    var mainDiv = $( "main" );

};

</script>

This code snippet will simply prevent any conflicts. Still, you’ll need to use the full name, jQuery, instead of a shortcut.

Step 2: Make a script file

Now that you have the code you need, you’re ready to make a script file. Create a file and give it a descriptive name like “my_new_script_file.js”. Make sure to use the .js extension and add your preferred compatibility code snippet at the top.

At this point, you’ll need to access and edit your theme files, which have their unique folders within your website files. 

Start by connecting to your website using your file manager or a free File Transfer Protocol (FTP) client like FileZilla.

Then, open your root directory. This should be named something like public_html or simply public. Alternatively, it could just be your website’s name.

Next, locate your active theme’s folder and create a new subfolder. Call it /js/. 

Finally, add your new script file to this subfolder. Its contents will differ depending on the feature you’re trying to implement. 

Step 3: Add a jQuery script to your functions.php file

Next, you’ll need to locate your theme’s functions.php file. Both parent and child themes should have one. This is where all manual customizations happen.

Since JavaScript requires enqueuing, you’ll need to use the wp_enqueue_script() function. Your code might look something like this:

function my_theme_scripts() {

    wp_enqueue_script( 'my_new_script_file', get_template_directory_uri() . '/js/my_new_script_file.js', array( 'jquery' ), '1.0.0', true );

}

add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Make sure to substitute the name of your unique script file and add it to functions.php. This will tell your theme file to use the script file you created in the previous step.

Method 2: Add jQuery with a WordPress plugin

As we have just seen, adding jQuery manually can be time-consuming and a bit risky, especially if you’re not familiar with editing code in WordPress. So, now we’ll show you how to add jQuery with a WordPress plugin.

Step 1: Install a jQuery plugin

First, you’ll need to choose a jQuery plugin. Two of the most popular options are Simple Custom CSS and JS and Advanced Custom Fields.

For this tutorial, we’ll use Advanced Custom Fields. This tool helps you create engaging, interactive features with custom block types. 

The free version has plenty of useful block types for adding elements like button groups, Google Maps, color pickers, oEmbed, and much more. If you want all 30 custom blocks, though, you’ll need to upgrade to the paid version of Advanced Custom Fields. 

Once you’ve selected your preferred plan, simply install and activate the plugin as you usually would. Add any license keys under your plugin settings.

Step 2: Create a new custom field

After you’ve installed and activated the plugin, go to Custom Fields → Add New.

Here, you’ll need to create your first field group. Give it a title next to Add New Field Group. Then, click on Save Changes.

Now, you can start editing the new field. You can expand the options by clicking on Edit below the label.

First, open up the dropdown menu for Field Type, and select one.

Then, fill in the Field Label, Field Name, etc. If you continue to scroll down, you can modify additional settings like Location Rules and Presentation.

Depending on the location you select, you’ll be able to view your new custom block there. In the Block Editor, you can identify the block by the label you designated under Field Label.

When you’re finished, click on Save Changes. You can select the + Add Field button and repeat this process. After that, simply go to one of the locations you chose for your field and start customizing it! 

How to defer jQuery in WordPress

As we’ve discussed, there are plenty of reasons to use JavaScript and jQuery in WordPress. In fact, they’re crucial for certain interactive features that many users take for granted.

But the downside is that these sophisticated client-side elements might slow down your website. So, you may want to automatically defer JavaScript (and, by extension, jQuery) when your WordPress site loads. 

By deferring JavaScript, all the main elements on your site will load before the less critical JavaScript features. Of course, your site visitors probably won’t notice this happening, but it will likely improve their user experience (UX) because the page will appear to load faster.

If you want to automatically defer jQuery on your website, you can use Jetpack Boost to do so.

This plugin can drastically improve your website’s performance overall. As a result, you’ll be able to maintain all your preferred JavaScript features without compromising page speed.

In addition to deferring non-essential JavaScript, Jetpack Boost can optimize CSS loading and apply lazy image loading (among other performance optimizations). Using this tool, you can improve your Core Web Vitals scores and boost your site’s visibility in search results.

Frequently asked questions about jQuery in WordPress

Hopefully, we’ve clarified most of your doubts about jQuery in WordPress. Still, if we missed something, here are some frequently asked questions!

Can you change the jQuery version used in WordPress?

Sometimes themes and plugins can replace or add jQuery versions to your site. Therefore, it’s important to ensure that your version is always up-to-date. You can easily do this using a plugin like jQuery Updater or Version Control for jQuery.

Where can I check the jQuery version on my WordPress site?

You can usually check your jQuery version in a browser. In Google Chrome, simply navigate to your website on the front end. Then, go to View → Developer → JavaScript Console.

Enter jQuery.fn.jquery, and the console should return your site’s current version. 

Can you completely remove jQuery from WordPress?

The short answer is: yes. If you discover that using JavaScript on your site negatively impacts its performance, you may want to remove or ‘deregister’ jQuery. 

To do this, simply add the following code to your functions.php file:

// Remove jQuery

function vpsb_remove_jquery() {

    if (!is_admin()) {

        wp_deregister_script('jquery');

        wp_register_script('jquery', false);

    }

}

add_action('init', 'vpsb_remove_jquery');

Keep in mind you should only completely remove jQuery from your site if it’s drastically slowing down your pages. This likely won’t happen, though, since jQuery already optimizes heavier JavaScript code.

If your site’s speed has deteriorated after adding jQuery, a better alternative would be to use a solution like Jetpack Boost. It can defer non-essential JavaScript.

Can you replace jQuery with vanilla JavaScript?

It is possible to replace jQuery with vanilla JavaScript. But, it might prove challenging if you don’t have much development experience. So, you should consider hiring a developer if you need to do this.

Once again, it’s worth noting that replacing jQuery with vanilla JavaScript is probably unnecessary because jQuery already provides optimal JavaScript code. Most of the time, the minor performance effects of jQuery are usually worth the trouble, and deferring is typically a better option.

If you decide to go this route, it’s worth checking out this guide to adding JavaScript to WordPress. It can help you with the process.

Using jQuery in WordPress

Using complex JavaScript for engaging features on your site can drastically improve the UX and advance your goals. Unfortunately, you may not have the time or development skills to create these interactive elements from scratch. The good news is that you can use jQuery scripts to make this process easier.

To recap, there are two ways you can add jQuery to WordPress. First, you’re able to do this manually by going into Compatibility Mode and creating a script file. Then, add your new script to your functions.php file. Alternatively, you could use a plugin like Advanced Custom Fields to speed up the process and eliminate the need for manual coding.

When you use jQuery to add sophisticated design elements to your website, you can improve the UX and impress your visitors. But multiple interactive features could harm the performance of your web pages. Fortunately, Jetpack Boost can help optimize your site’s speed.

---