Use jQuery in WordPress

jQuery is perhaps the most often used JavaScript library, and it’s easy to see why. It’s also a part of the development “stack” i.e., crucial for anyone who wants to be a WordPress developer. Additionally, jQuery is designed to do a lot with very few resources. In other words, you can create attractive, interactive, and complex elements while using a minimal amount of bandwidth. Moreover, you won’t use any of your web server resources – the code runs on the client-side, e.g., their web browser or application. With that acknowledged, let’s show you how to use jQuery in WordPress.

Do I need to upload jQuery to WordPress?

No, you don’t need to upload the jQuery library to your WordPress website. This is a common question because developers oftentimes download scripting libraries before using them in web-oriented IDEs (Integrated Development Environments) like Visual Studio Code, Atom, or Eclipse. Because WordPress is designed to be beginner-friendly, the jQuery library is part of the WordPress installation package by default.

Use jQuery in WordPress manually

This method covers making your first script, uploading it to WordPress, and letting WordPress know to pull from it. While it’s light on your server resources, the margin of error is extremely low. So, unless you want problems on the front end, stay vigilant. With that out of the way, follow these steps to manually use jQuery in WordPress:

1. Ensure your script doesn’t clash with others

The primary problem with adding jQuery to WordPress is that plugins or your active theme may use its shortcut “$”, whether for jQuery or other JavaScript libraries. If you were to use it again, two scripts would conflict and cause issues. Luckily, there are 4 common ways to evade conflicts between JavaScript libraries:

1. Switch to Compatibility Mode

The first solution is to make the script enter Compatibility Mode. Upon being called, it will return the “$” shortcut to the previous meaning, avoiding conflict. Additionally, it’ll let you use the full function name (jQuery) without problems. Here’s how that looks:

$.noConflict();
jQuery(document).ready(function() {
$j( "div" ).hide();
});
});

Note. The code on line 3 is a simple example that hides the content division element in HTML. Replace it with yours. Also, replace ‘selector’ and ‘event’ in line 4 to fit your script like this: jQuery.(selector).event(function);

2. Define a different alias

An optional way to solve the problem is to define an alternate alias/variable that your script will use. In the case below, “$” will, once again, return to its original meaning. We used a “$b” alias as a replacement for “jQuery” above:

var $b = jQuery.noConflict();
$b(document).ready(function() {
$b( "div" ).hide();
});

3. Make jQuery load before other libraries

We presume that you’ve made it so that jQuery loads after another library above. Well, you can disregard Compatibility Mode if you make sure jQuery is included beforehand. That way, you’re free to use the full function (“jQuery”) while still letting libraries define the meaning for “$” without any clashes between them. Here’s how that looks:

<script src="jquery.js"></script>
<script src="another-script.js"></script>

<script>
// We use “jQuery” as the name of the function to reference jQuery.
jQuery( document ).ready(function() {
jQuery( "div" ).hide();
});

// Use the $ variable the way it's defined in another-script.js
window.onload = function() {
var mainDiv = $( "main" );
};

</script>

4. Utilize the immediately invoked function expression

This is a method used by WordPress plugin developers that include jQuery in their code. After all, they have no way of knowing whether the person who installs it has the “$” shortcut taken over by another library, which would make them struggle over the usage right. The solution is to envelop your code into an immediately invoked function expression:

jQuery.noConflict();

(function( $ ) {
// Add your code here, and make sure you use the “$”. Example: $( "div" ).hide();
})( jQuery );

2. Create and upload your JavaScript script file

You have your code now but you still need to convert and upload it. Here’s what to do next:

Optional. Copy the code to a “JavaScript code check/validator” tool, either online or as part of an IDE such as NetBeans or Eclipse.
Copy the code to a text editor or IDE software.
Give it any name you want, then, while saving, ensure it has a .js file extension, e.g., my-jquery-script.js.
Access your website using FTP.
Open your theme or child theme folder (root/wp-content/themes/theme-name/).
Optional. To keep things tidy, you can create a new folder inside, and name it js.
Upload my-jquery-script.js to either the folder in step 5 or step 6.

3. “Enqueue” your script to WordPress within the functions.php file

Don’t fret if you don’t recognize the term. The function wp_enqueue_script() will instruct WordPress to pull in and begin using your script file on the front-end. Follow these instructions to do so:

Find the functions.php file within your theme/child theme folder.
Right-click on it, then select View/Edit from the menu.
Scroll to the bottom and paste this code before saving changes:

function my_theme_scripts() {
wp_enqueue_script( 'my-jquery-script', get_template_directory_uri() . '/js/my-jquery-script.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Note. Replace the bolded parts with your script’s name. You can also change the handle/name of the function (my_theme_scripts), ours is an example.

4. Add parameters to the enqueue function (Optional)

The wp_enqueue_script() recognizes 5 parameters or arguments:

$handle – Used as a way to refer to the script. We used “my_theme_scripts”.
$src – Define the location of the script file. As you can see, there’s no need to enter the full file path, only what’s beyond /theme-name/.
$ver – The version number of the script you made.
$deps – Define an array of dependencies (in this case, libraries) for the script.
$in_footer – Set whether the script loads in the footer. We used ‘true’ because, by default, scripts load in the header, which affects website loading speed negatively.

Note. We used all 5 arguments for demonstration and recommend you use them too. However, only the first and fourth are mandatory for scripts that use jQuery.

Using jQuery in WordPress via a plugin

Most users are afraid of messing up the code or letting syntax errors slip through. Well, there’s a forgiving alternative that either prevents the script from wreaking havoc or lets you disable it effortlessly. Unsurprisingly, we’re talking about installing a WordPress plugin. After getting your code ready (follow step 1 of writing the jQuery script by hand above), check how adding JavaScript in WordPress works. To be more specific, use any of the sub-methods under method 2. For beginners, we recommend sub-method 1, but only the instructions below the headline titled “Third-party plugin”.

How to Use jQuery in WordPress