Adding jQuery to your WordPress site

Posted by & filed under Tutorials, WordPress.

WordPress jQuery

jQuery is the most popular JavaScript library. It allows to highly simplify the front-end development as it offers a lot of ready-made plugins. Instead of creating something new, you can just add the plugin and solve any issue with the website.

It is also very often used in WordPress to simplify the front-end part of the website. Moreover, it is even added to WordPress by default. When you install a new template for your website, you may face a situation where, due to the old version of jQuery connected to WordPress, the additional functionality you need does not work. The solution to this problem, in fact, is not such a complicated one. To update WordPress jQuery, you will just need to add a few lines of code. Nevertheless, there are some interesting nuances of working with this library. So let’s look at this question in more details.

In the article, we’ll show you how to properly disable and enable jQuery in WordPress, and download the latest version. We hope this information will be useful to you. There will be a lot of code samples in the article.

 

Using ‘$’ instead of ‘jQuery’ in WordPress

As we found out, WordPress comes with jQuery. To use it in your plugins and themes properly, you need to add the following code to the functions.php file:

 

The trick here is that by default the copy of jQuery works in a compatibility mode. This means that the well-known shortcut $ will not work. This is done not to create conflicts with other JavaScript libraries using the dollar sign, for example, MooTools or Prototype.

Many plugin creators and theme developers know about this and use jQuery instead of ‘$’ to make the product secure.

 

When you write the Query line in scripts many times, it complicates their readability and excessively increases the script size. As a result, the site is overloaded and work slower. Let’s stop doing this.

If the script is loaded in a footer, which is done in most cases, you can wrap the code in an anonymous function. $ will be transferred into it:

 

 

If you need to load all the scripts in the header, you probably have to use the document readiness feature. $ will be sent there:

 

Now you can safely use the $ symbol in your jQuery scripts added to the WordPress website.

 

How to add jQuery to your WordPress custom theme or plugin

To run the jQuery scripts on the WordPress website, you need to add the appropriate libraries. But fortunately, the WordPress structure already includes all the necessary libraries. To make them work, you just need to connect them to your theme.

 

How jQuery connects to WordPress

In WordPress, the jQuery library is automatically connected, if in your template you have the following php code in the HEAD section:

 

Register jQuery in WordPress correctly

So, before connecting the WordPress jQuery, open the page HTML-code and make sure that jQuery is not connected before by the active theme or any of the plugins. All the connected WordPress scripts should be registered and loaded with the wp_enqueue_script() function. It is necessary in order the plugins could detect the connected particular library, identify the dependencies and did not load the same scripts again.

If the website HTML-code does not mention jQuery, then you have to initiate its connection in the functions.php file of the active theme. jQuery is the easiest to connect to WordPress because it is registered by default.

To automatically connect the WordPress jQuery library from WordPress, you need to add the following lines to the functions.php file of your theme:

 

 

 

Checking the WordPress jQuery load

If you did everything correct, then in the source code of your website in the HEAD section you should see similar lines:

To activate the source code view, press Ctrl + U in the browser window.

WordPress jQuery

How to use a different jQuery version than in WordPress

Consider another situation, when jQuery is already connected to a theme or plugin, but you need another version. Also, you may need to load jQuery from another source, for example, the CDN.

First, you need to deregister the previously loaded jQuery:

And then register a new one. For example, this way:

 

Remember, the wp_register_script() function has several parameters: wp_register_script($handle, $src, $deps, $ver, $in_footer);

  • $handle — a shortcut, a unique script name;
  • $src — path to the script;
  • $deps — the array of scripts on which the loaded script depends;
  • $ver — version;
  • $in_footer — script downloading in the footer.

 

How to update WordPress jQuery

When you are going to update the library, then the whole process consists of two parts. First, you need to disable the script in the WordPress jQuery and then reactivate it. For that, use the wp_deregister_script, wp_register_script, wp_enqueue_script functions. What do they mean?

  • wp_register_script — registers the script to be connected (it is not automatically loaded);
  • wp_enqueue_script — loads the script for the website/theme/plug-in;
  • wp_deregister_script — deletes the previously registered script.

 

The complete jQuery update code in functions.php file will look like this:

 

There are several nuances here:

  • The link to ajax.googleapis.com allows you to connect to WordPress the latest and current version of the jQuery library. You can specify a particular value if you wish.
  • ​​true values as the most recent parameter will load jQuery into the footer, if possible. Here, for the output, you need not wp_head, but wp_footer, which should also be in each theme.
  • After updating jQuery, it is important to check the functionality of installed plugins or scripts on the website. If they need this library to work, then it should be requested earlier, so, probably, moving the code to the footer is not always the best solution.
  • This code connects jQuery from the Google CDN instead of the base script from the WordPress system itself. CDN technology allows you to use files from the server closest to the user, which speeds up the download.

If you look closely at the HTML code of your WordPress websites, along with jQuery, you often can notice there another similar script named jquery-migrate.min.js. This library eliminates all incompatibilities of your template or modules with earlier versions of jQuery. If you need to leave this migrate script while upgrading the WordPress jQuery library, then the previous code will look a bit different:

 

The jquery-core parameter specifies that only the main script of the library will be replaced, and jquery-migrate.min.js will not affect this procedure.

Editing the functions.php file will be a much better option in most cases. It is not too difficult to put an additional module. If you have something to add about jQuery in WordPress, please share with us in the comments.

Leave a Reply