Easy Methods for Adding jQuery to Your WordPress Website

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 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 detail.

In the article, we’ll show you how to disable and enable jQuery in WordPress properly, 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.

What is jQuery?

To better understand WordPress jQuery, the first thing you need to do is to brush up on your basics about JavaScript. It is one of the prominent languages that is generally used to make changes, do calculations, and validate data on a website.

In addition to that, with the help of JavaScript, you can also make changes or update HTML and CSS. In simple words, you can freely make rules and design your website structure and content. It is all possible due to the availability of a wide range of different script libraries.

JQuery is one of the script libraries which is fast, small, and full of features. It is an open-source library with the help of which you can add or create front-end functionalities. For example, if you see any type of dynamic functionality on your websites, such as rotation or slider, it means jQuery is working.

Why You Should Use WordPress jQuery?

When using WordPress jQuery, you will find there are plenty of advantages that you didn’t think of. Apart from its use in creating dynamic and appealing functionalities on your website, it can also help to reduce your limited bandwidth congestion. 

It is all possible because with the help of jQuery, you can run any moving elements directly in the browser, without reloading the webpage.

What is the “$ is not a function WordPress” Error?

If you are using WordPress, by default it is unable to understand “$” as jQuery, due to which it will trigger an error message “$ is not a function WordPress” error on your screen. It actually occurs when the code starts to execute just before the jQuery library.

Let us understand it with an example, suppose a theme or plugin is calling a code before calling the right jQuery library, the error will occur. Therefore, to fix this error you have to make certain changes which we have explained in the section below.

Note: As we have already warned you many times if you are looking to make certain changes in WordPress core files. As a precautionary measure, the first and foremost step is to create a complete backup of your WordPress site. It is so important that, if you by any chance miss any character or even a “;” it may result in complete website damage.

Similarly, you can also check out our other detailed blogs covering all major WordPress errors such as error 404, dns_probe_finished_nxdomain, 504 gateway error, etc., and their solutions in very comprehensive language. 

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:

wp_enqueue_script("jquery");

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.

/* Normal jQuery you see everywhere */
$("#some-element").yaddaYaddaYadda();

/* "Safe" jQuery you see in WordPress */
jQuery("#some-element").yaddaYaddaYadda();

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 works 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:

(function($)
{ // $ Works! You can test it with next line if you like
// console.log($);
})( jQuery );

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

jQuery(document).ready(function( $ ) {
// $ Works! You can test it with next line if you like
// console.log($);
});

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

How to Add jQuery to 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:

<?php wp_head(); ?>

Register jQuery in WordPress Correctly

So, before connecting the WordPress jQuery, open the HTML-code page 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 for the plugins to detect the connected particular library, identify the dependencies, and 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:

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

Checking the WordPress jQuery Load

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

<script type='text/javascript' src='https://sitename.tld/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>

<script type='text/javascript' src='https://sitename.tld/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>

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, CDN.

First, you need to deregister the previously loaded jQuery:

wp_deregister_script('jquery');

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

wp_register_script('jquery', '//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js', false, null);

wp_enqueue_script('jquery');

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.
Server issues
WPOven

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 WordPress jQuery and then reactivate it. For that, use the wp_deregister_script, wp_register_script, and 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 the functions.php file will look like this:

wp_deregister_script('jquery');

// Remove themes old version of jQuery and load a compatible version

function my_update_jquery () {
if ( !is_admin() ) {

wp_deregister_script('jquery');

wp_register_script('jquery','https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, false, true);

wp_enqueue_script('jquery');
}
}
add_action('wp_enqueue_scripts', my_update_jquery);

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 to 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 notice there is 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 migration script while upgrading the WordPress jQuery library, then the previous code will look a bit different:

function my_update_jquery () {
if ( !is_admin() ) {
wp_deregister_script('jquery-core');
wp_register_script('jquery-core', 'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, false, true);
wp_enqueue_script('jquery');
}
}
add_action('wp_enqueue_scripts', my_update_jquery);

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 in an additional module. If you have something to add about jQuery in WordPress, please share it with us in the comments.

How to Add WordPress jQuery using WordPress Plugins?

If manually inserting scripts in the WordPress core files is not a cup of your tea or you do not want to take any risks. You can also go for the easier alternative way, i.e. using a WordPress plugin.

There are plenty of Free WordPress plugins available, but the two well-known plugins that you can use are:

  • Advanced Custom Fields
  • Simple Custom CSS and JSS

For your reference, we are using the Advanced Custom Fields plugin here.

Step 1: Go to your WordPress Dashboard > Plugins > Add new > “Advanced Custom fields” > Install > Activate. 

advanced custom Fields
advanced custom Fields

Step 2: After installing and activating the plugin, you have to change its settings in order to use it on your website. Go to Custom Fields and click on Add New to create your new custom field as shown below:

Advanced Custom  field Settings
Custom Fields Settings

Step 3: Now, the first thing you need to do is to label the field group and click on the Add Fill button to name your new field.

Screenshot 9 Easy Methods for Adding jQuery to Your WordPress Website
Adding new Field

Similarly, you can add multiple fields and fill up the new form generated to name new fields. After filling up all the new Fields, you can also drag and reposition the fields as per your requirement. This means you are free to choose the edit pages the field will appear on.

In addition to that, you will find there are multiple options available from which you choose, depending upon the type of theme you used and the structure of your website. After finishing up with all the settings, you can publish your new settings and it will start reflecting on your website accordingly.

Conclusion

In this article, you have learned What is jQuery, its benefits, and how you can add jQuery to a WordPress site are very simple and easy steps. To know further about these special libraries, we highly recommend you go deep down and learn about jQuery and how it works with WordPress before either using a Plugin or doing it manually.

If you find anything we have missed mentioning in this post or you have any doubts regarding jQuery, please do let us know in the comment section below.


Save your time, money, and resources, and give your website mammoth growth with WPOven’s Fastest, and Fully managed WordPress dedicated server hosting.

  • 24X7 WordPress Expert support
  • Cloudflare integration
  • High-end Security
  • Datacentres around the world, etc.

You can have all these features and much more in a single plan with unlimited Free migrations, unlimited staging, and a 14-day risk-free guarantee, Sign up Now!

Can I use jQuery in WordPress?

Absolutely, you can use jQuery in WordPress. In fact, jQuery is quite famous among developers and web designers for using it in themes and plugins. In addition to that, WordPress CMS even has some jQuery libraries that let web designers or developers utilize jQuery in their themes and plugins with its complete potential.

Is jQuery necessary for WordPress?

Yes, jQuery is quite necessary for WordPress, in fact, it is a very important library for the platform.

Is it still OK to use jQuery?

jQuery is quite simple and easy to use and also it has the additional benefit of not clogging your bandwidth. So, developers do not think of discontinuing using it in the coming years.

One Reply to “Easy Methods for Adding jQuery to Your WordPress Website”

  1. Awesome! Its truly amazing article, I have got much clear idea regarding
    from this piece of writing.

Leave a Reply

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