How To Add jQuery Scripts To WordPress Easily

WordPress has been around us for more than a decade now. Even though the platform is widely famous for its ease of access, adding jQuery in WordPress themes and plugins is a concern for many developers.

We’ve previously written guides on fixing issues like the WordPress white screen of death and putting your WordPress site into maintenance mode. And in this piece, we’re going to explain how to add jQuery to WordPress, but before we dive into that, here’s a brief overview of jQuery’s Compatibility mode.

jQuery’s Compatibility Mode

It is equally important to understand what jQuery’s compatibility mode is before starting using jQuery in WordPress.

jQuery in WordPress comes preloaded, and you can use it in your code. However, the point here is that it also comes with jQuery’s compatibility mode, which avoids conflicts with other libraries of different programming languages.

Even though this may sound quite normal but there’s a slight problem with this defense mechanism. When using jQuery in WordPress, you’ll have to use the term “jQuery” instead of our good old $ sign.

Have a look at this example.

/* Regular jQuery */

$(‘.hideable’).on(‘click’, function() {

$(this).hide();

})

/* Compatibility Mode */

jQuery(‘.hideable’).on(‘click’, function() {

jQuery(this).hide();

})

Now the problem here is not that big, but rather it isn’t very pleasant. First, you need to write the “jQuery” every time, which takes quite a lot of time, and secondly, this makes your script look cluttered and harder to read.

But don’t worry, with a few modifications, you can get around the compatibility issue and be able to use the good old $ sign.

For reference, $ is an alias to jQuery() and a handle to a function.

Here’s how a basic structure looks like.

$(selector).action()

Here, the $ sign refers to jQuery, $(selector) finds HTML elements, and action() defines the action to be performed on the these elements.

Here’s are some techniques that you can leverage to get around jQuery’s compatibility issue.

How To Get Over jQuery’s Compatibility Issue?

1. Enter “jQuery Stealth” Mode
2. Enter “No Conflict” Mode

Enter jQuery’s Stealth Mode

Image source: Podfeet

The first and most common way to get around the compatibility issue is to enter the stealth mode (getting stealthy with your code).

Let’s say you’re trying to load the script in the footer. Wrap the code in an anonymous function, which will ultimately map jQuery to $.

Refer to this example

(function($) {

$(‘.hideable’).on(‘click’, function() {

$(this).hide();

})

})( jQuery );

Now, if you want to add the script in the header, wrap everything in a document-ready function, and pass $ along the way.

Here’s an example.

jQuery(document).ready(function( $ ) {

$(‘.hideable’).on(‘click’, function() {

$(this).hide();

})

});

Enter No Conflict Mode

Now this one is quite a simple way of getting around compatibility issues. All you have to do is declare this line of code on top of your script, and you can use $j instead of the default $ sign.

var $j = jQuery.noConflict();

Now that you know how to use jQuery in WordPress, let’s move down to our main subject – how to add jQuery scripts to your WordPress site.

How To Add jQuery To WordPress Sites

Image source: fl1digital.com

Adding jQuery to WordPress could be done easily by a process called Enqueueing.

We use the element <link>to add scripts in regular HTML websites. We can also do the same thing in WordPress. However, we need to play some of WordPress’s special functions to get into that. Note that doing this would handle all the dependencies for you.

Let’s say you’re working a WordPress theme. Use this function in your functions.php file.

wp_enqueue_script()

Here’s how it looks.

function my_theme_scripts() {

wp_enqueue_script( ‘my-great-script’, get_template_directory_uri() . ‘/js/my-great-script.js’, array( ‘jquery’ ), ‘1.0.0’, true );

}

add_action( ‘wp_enqueue_scripts’, ‘my_theme_scripts’ );

Here are five arguments that this function would take.

1. $handle: a unique handle that could be used to refer to a script
2. $src: location of your script file
3. $deps: used to specify an array of dependencies
4. $ver: the version number of the script
5. $in_footer: to instruct WordPress on where to place the script

By default, the script would be loaded on your website’s header, which is not recommended because it significantly affects your site’s speed.

Related: Your Ultimate Guide on How to Edit WordPress – HTML, CSS, PHP, JavaScript

How To Add jQuery Scripts To WordPress Admin

You can add jQuery to WordPress admin using the same functions. All you have to do here is to use a different hook.

Here’s an example

function my_admin_scripts() {

wp_enqueue_script( ‘my-great-script’, plugin_dir_url( __FILE__ ) . ‘/js/my-great-script.js’, array( ‘jquery’ ), ‘1.0.0’, true );

}

add_action( ‘admin_enqueue_scripts’, ‘my_admin_scripts’ );

Now just swap wp_enqueue_scripts with admin_enqueue_scriptsand you’re good to go.

How To De-Register jQuery In WordPress

You’d need to de-register WordPress’s jQuery if you’re willing to use a different version of jQuery from the preloads.

Here’s an example of how you can de-register jQuery in WordPress.

// include custom jQuery

function shapeSpace_include_custom_jquery() {

wp_deregister_script(‘jquery’);

wp_enqueue_script(‘jquery’, ‘https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js’, array(), null, true);

}

add_action(‘wp_enqueue_scripts’, ‘shapeSpace_include_custom_jquery’);

It’s simple. All you need to do is to de-register WordPress’s jQuery using wp_deregister_script()and include the script that you want.

One thing to remember here is that we’ve added Google hosted jQuery library in this example. You need to switch it with your own script’s URL.

Should You Register Scripts Before Enqueuing?

You can register the script earlier on in the process if you want them to load only when needed in your pages.

Here’s an example

add_action( ‘wp_loaded’, ‘register_all_scripts’ );

function register_all_scripts()

{

wp_register_script(…);

}

Once you’re done with this, enqueue the scripts when you need them. Here’s how.

add_action( ‘wp_enqueue_scripts’, ‘enqueue_front_scripts’ );

add_action( ‘admin_enqueue_scripts’, ‘enqueue_back_scripts’ );

Using Conditional Tags

You can also use conditional tags to only load your jQuery in WordPress when needed.

Even though this method is typically used in Admin where you want it on specific pages only, it saves a lot of bandwidth and processing time, ultimately enhancing your site’s loading speeds.

Refer to WordPress’s admin enqueuer scripts documentation for more information about using additional tags.

How To Add jQuery To WordPress Using Plugins

WordPress boasts over its plugin directory of more than 45000 plugins. You can find a plugin for any functionality that you want on your WordPress site.

The same is for adding jQuery in WordPress site pages, themes, and posts, etc.

Here are some of the most popular plugins for adding jQuery to WordPress.

• Advanced Custom Fields
• Simple Custom CSS and JS
• Scripts N Styles
• Asset Cleanup

Conclusion

So there you go. Now you know how to add and use WordPress jQuery.

Applying this knowledge to your projects would help you creating great projects. You can also read our definitive guides on subjects like JPG vs. JPEG and WordPress White Label to raise your knowledge.