How to add jQuery scripts to WordPress?

WordPress plugins and themes are part of what makes the CMS so popular, as they allow the customization and optimization of the websites hosted on the platform.

However, to take full advantage of these elements, it is important to know how to add and use jQuery scripts.

But do you know what jQuery is? It is a JavaScript library created by John Resig in 2006. Its main purpose is to associate with JavaScript elements in HTML in order to provide more dynamism and usability to web pages. 

Its lines of code simplify the scripts that are interpreted by the client-side browser and for this reason, it is one of the most popular libraries in the developer community. Don’t know how to use this feature?

Don’t worry. In this text, we will describe the main steps for you to add jQuery scripts to WordPress. 

We will go over:

• Check jQuery compatibility;
• Entering jQuery stealth mode;
• Entering no conflict mode;
• Enqueuing jQuery in WordPress.

Keep reading and learn more!

Check jQuery compatibility

Since WordPress is an open-source tool that deals with different types of plugins and themes, the system uses a mechanism to ensure compatibility between different applications.

Therefore, it is necessary to make sure that jQuery is added in a way that does not interfere or conflict with other libraries. 

To do this, all you need is a small change in the way you write your lines of code. To make jQuery compatible, you should not use the $ sign in your code, as you probably do in other projects. Instead, you should use the jQuery command. 

So, look at the example below: 

/$('.hideable').on('click', function() {
$(this).hide();
})

As it uses the $ sign directly, this line of code could encounter compatibility problems. To avoid this, it should look like this:

jQuery('.hideable').on('click', function() {
jQuery(this).hide();
})

Simple, isn’t it? Just replace the dollar sign with jQuery to make the code compatible with WordPress. There is only one problem: this substitution can make the code too long and hard to read. However, we have some good news.

You can change the settings to use the $ sign without any problems. For that, there are two options: using the stealth mode or the no conflict mode. We will talk more about them in the next topics. 

Entering jQuery stealth mode

If you are new to jQuery, you must understand how the script structure works before you learn to enter stealth mode. The framework looks like this: $(selector).action().

Let’s break it down for you:

• $ – the dollar symbol communicates that it is a jQuery script;
• (selector) – acts as query, representing an HTML element that needs to be found;
• action() – defines the function that will be executed on the element.

Now, as we saw in the last topic, WordPress requires you to use the compatibility mode, replacing the dollar sign. To get around this and enter stealth mode, you need to enter a code that maps jQuery to $. Using an anonymous function, wrap the following code:

(function($) {
$('.hideable').on('click', function() {
$(this).hide();
})
})( jQuery );

Here, it is important to note that this process only works in the footer. If you are wondering, it is feasible to run something similar in the header, although this may slow down your website. Therefore, it is not a recommended action. 

However, if you need to, you should wrap the whole code in a document-ready function, looking like this:

jQuery(document).ready(function( $ ) {
$('.hideable').on('click', function() {
$(this).hide();
})	
});

Entering no conflict mode

Another way to avoid the need to spell jQuery every time you apply the script is by entering no conflict mode. This allows you to replace the dollar sign with the j$ alias but you can define a different symbol later. 

To enter conflict mode, follow the example below:

To enter the mode, follow the example below:<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
 
var $j = jQuery.noConflict();

Now that you know how you can get around the issue of jQuery’s compatibility with WordPress, let’s move on to the next step. Keep reading!

Enqueuing jQuery in WordPress

There are different ways to add jQuery to WordPress. You can do it by adding inline scripts, using an editor, or even employing a specialized plugin. The CMS directory has a huge variety of applications for all purposes. 

For this specific goal, one of the highlights is the Advanced Custom Fields, which have been installed in millions of sites around the world.

It is a practical solution but if you want to follow the most efficient process and ensure the security of your site, the best way is to enqueue Jquery in WordPress. 

<!–[if lte IE 8]>

<![endif]–> hbspt.cta.load(355484, ‘104906ab-9484-425b-b101-a6a478d876cb’, {});

This method is the simplest among the available options. This is because WP itself provides an enqueue script function that ensures that the entire process runs correctly and within platform security standards. We are talking about the wp_enqueue_script function. 

It tells WordPress what the dependencies of a file are, when the file should be loaded, and on which page it should be loaded. This procedure has no effect on website loading speed, ensuring the maintenance of a positive page experience.

To enqueue jScript in WordPress use the code below:

function custom_scripts_method()
{
wp_register_script('customscripts', get_template_directory_uri() . '/js/jquery.min.js', array('jquery'), '1.0.0', true);
wp_enqueue_script('customscripts');
}

add_action('wp_enqueue_scripts', 'custom_scripts_method');

It is important to note that this function includes 5 parameters, which are:

• $handle – the first parameter is the name you will use to refer to your script, which must be written in lowercase;
• $src – concerning the location of your script file;
• $deps – specifies the number of dependencies and loads jQuery if it is not already being loaded — this is an optional field;
• $ver – another parameter that is not mandatory, this one refers to the version number of your script;
• $in_footer – indicates where you want WP to put your script — if it is in the footer, set it to true, if you want to place it in the header, just make it false. 

Now that you know how to add jQuery scripts to WordPress, you should have an even more efficient experience on the platform.

CMS offers many features that can optimize your website but it is not always possible to master them all. So, if you have any questions, it is always wise to rely on a good WordPress hosting service.

Want to improve your internet strategy? Then, you need to master WordPress and its features. In this ebook, we present a guide on WP for corporate blogs. Check it out!