What Is jQuery in WordPress?

jQuery is a popular open-source JavaScript library. It is so widely used that WordPress decided to include jQuery into its core, starting from version 3.8.1

This library streamlines the web development process by creating jQuery methods or functions, which wrap a bunch of pre-written JavaScript code. This way, developers don’t have to write the code from scratch — they just need to call a method by using a code snippet.

With jQuery, you can manipulate certain elements on the page. For example, you can fade in a popup form, send the data using AJAX, and fade out the form with the fadeOut() function. By using these jQuery methods, you can perform actions on the page without reloading it.

jQuery is great because of how lightweight it is and how easy it is for developers to learn. This article will breakdown how jQuery works in WordPress and how you can use it on your website.

jQuery Methods in WordPress

jQuery uses the dollar sign ($) for its methods. This can create a conflict in WordPress since it also has Prototype, another JavaScript library that uses the dollar sign.

To solve this issue, WordPress jQuery is in compatibility mode by calling the jQuery.noConflict(); function. It will let the dollar sign to be used by other libraries, thus avoiding any clash. As a replacement, jQuery methods in WordPress will use the word “jQuery” instead.

For example, here’s the method to perform an AJAX request in regular jQuery:

$.ajax({...});

In WordPress, the method will look like this:

jQuery.ajax({...});

If you prefer to use $, there is a way to do so, which will be discussed later on in the article.

How to Use jQuery in WordPress

If you are coding a theme or a plugin, you can add jQuery methods in your JavaScript files as regular JavaScript functions.

However, if you just want to add a function to the theme you are using, I suggest creating a child theme first to avoid losing your changes when the theme is updated. Once that is done, the jQuery functions would go in the functions.php file of your child theme.

WordPress is Included in WordPress by Default

In WordPress version 3.8.1 onwards, you don’t need to create a custom jQuery since it is included by default. You can find it in the root directory /wp-includes/js/jquery/jquery.js.

That being said, sometimes WordPress might not use the latest version of jQuery. If you want to add a different version, then you’ll need to deregister the current jQuery and add the new scripts to WordPress. This way, the platform won’t have two different copies running at the same time.

Deregistering jQuery to Call Latest Version

You deregister jQuery’s old version and register the new one by putting this code in the functions.php file:

function init_reload_jquery() {
	if (!is_admin()) {
		wp_deregister_script('jquery'); 
		wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', false, '3.4.1'); 
		wp_enqueue_script('jquery');
	}
}
add_action('init', 'init_reload_jquery');

Notice that when you register, you use the init hook, which is different from the wp_enqueue_scripts hook we’ll use later to call the function.

The init hook is short for initialization hook, which usually runs when the WordPress core has fully loaded but before any headers are sent. It is usually used to initialize plugins after the user has been authenticated.

In the code above, I use jQuery that is hosted by Google. You’re free to change the URL according to your liking.

Enqueueing a jQuery Script to WordPress

After deregistering and registering the new library, now we need to add or enqueue the jQuery scripts you want to use.

Instead of using <script></script> elements as if it was part of regular HTML page, you will have to enqueue the script with an action: 

function my_jquery_init() {
	wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'my_jquery_init');

Notice we are changing the hook from init to wp_enqueue_scripts. The latter is more widely used now to add new scripts into WordPress.

If you are just calling a function you have on another file, the wp_enqueue_script(); function accepts a parameter that lets you do that. For example:

function my_jquery_script() {
	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_jquery_script');

Take note that we’re now enqueuing with the wp_enqueue_scripts hook, which is different from the init hook we used before.

If you are using a child theme, you will have to change get_template_directory_uri() to get_stylesheet_directory_uri(). The code will look like this:

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

The true parameter in the code above will load the script to your site’s footer, which is more recommended because it will not slow down your site. If you set this parameter to false, the script will be added to your site’s header.

How to Use ‘$’ instead of ‘jQuery’

It is possible to go back to using the dollar sign in WordPress, but you have to do it inside of a function that lets you safely use it. 

If your script is in the footer, which is recommended, you can wrap it in an anonymous function:

jQuery(function ($) {
	/* Your regular jQuery script with ‘$’ goes here */
});

You can write your jQuery script file normally and wrap it within the {brackets} of that function.

If your script has to be in the header, then you can wrap the code in a document ready function:

jQuery(document).ready(function ($) {
	/* Your regular jQuery script with ‘$’ goes here */
});

Alternatively, you can create a new sign if you want to use other JavaScript libraries along with jQuery. Create one that is not as bloated as jQuery, but as short as $ — like $j.

All you have to do is enter this code into the beginning of your script:

var $j = jQuery.noConflict();

Conclusion

jQuery is an open-source JavaScript library that helps you to code more quickly. As it is incorporated in WordPress, there’s no need for you to set it up. You can simply enqueue jQuery scripts to your theme files.

Now that you know what jQuery is and how to use it, you can play around with it and check out the many features it could do to your website.