jQuery Versions in WordPress

A common problem developers have faced with WordPress over the years is the conflict of using multiple jQuery libraries. jQuery is a JavaScript library that can make front-end development a lot easier for developers. This is great, because many plugins and themes use jQuery in their front-end design and development. However, WordPress itself also uses jQuery. Your browser can only load one jQuery library at a time, so sometimes it can be confusing to know which library to use!

---

Calling jQuery the Proper Way

WordPress will automatically load jQuery for you when your plugins require it these days. However, it does require that you set jQuery as a dependency in your site’s code when enqueueing scripts. The wp_enqueue_script() function baked into WordPress uses the following parameters:

wp_enqueue_script( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

The $deps parameter indicates what dependences the enqueued script needs to load first. So an example of including jQuery as a dependency would look something like this:

wp_enqueue_script( ‘myscript.js’, get_template_directory_uri() .'/includes/js/myscript.js', array('jquery'), null, true);

In the example above, I’m enqueueing the myscript.js file, located in my theme’s directory under /includes/js/myscript.js, and specifying that jQuery is required as a dependency for this script.

---

Loading a Different jQuery Version

Another moment of confusion can arise when you want to load a different version of jQuery than the version that WordPress itself uses. If you enqueue this different version as a dependency, then the same issue happens where two versions of jQuery are being loaded. In this case you’d want to enqueue the jQuery version you want in noConflict mode. Take a look at the example below to see how jQuery can be loaded in noConflict mode:

wp_register_script( 'jquery3.2.1', 'https://code.jquery.com/jquery-3.2.1.min.js' );
wp_add_inline_script( 'jquery3.2.1', 'var jQuery3_2_1 = $.noConflict(true);' );
wp_enqueue_script( 'plugin-javascript', plugins_url( 'js.js', __FILE__ ), array( 'jquery3.2.1' ) );

Notice that in this example we’re first registering the new jQuery library we want then adding an inline script to ensure it’s running in noConflict mode. Next I can call the registered script as a dependency using wp_enqueue_script().

Another tricky part to calling multiple jQuery versions can be finding a proper way to call your jQuery version in noConflict mode within the context of a function. Here’s an example of what that could look like, based on my code above:

( function( $ ) {
// Alert jQuery version.
alert($.fn.jquery);
// Plugin/theme code should go here.
}( jQuery3_2_1 ) );

In the example above, I’m creating an alert box using the jQuery3_2_1 inline script variable set beforehand, which tells jQuery to run in noConflict mode. I’m setting it within the constraints of my function, to package it neatly with only my function. This ensures it does not apply to other aspects of the site.

Coding jQuery in this way will help ensure your code doesn’t conflict with other elements on your site. It also future-proofs your site in case WordPress or another plugin/theme on your site updates the version of jQuery being used.

---

NEXT STEP: Develop and deploy locally with Local