WordPress is a great platform on its own, letting just about anyone build a website for minimal cost.
However, some users, developers especially, may want to extend what the platform can do. For instance, you may want to add dynamic page elements that change appearance or content when the user interacts with them.
To get this done, most developers rely on JavaScript and its accompanying library jQuery to efficiently build engaging interfaces with lightweight code. In this post, we’ll show you how to get started with jQuery in WordPress. We will also recommend a couple of helpful WordPress plugins that you can use to make your website even better.
What is jQuery?
jQuery is a JavaScript library that makes it easier to manipulate HTML elements with JavaScript. It is free, open-source, and very popular among front-end web developers.
With jQuery, you can program your web pages to respond to user interactions, call other scripts, change the page content without reloading the page, and much more. If you’re familiar with JavaScript, it’s worth knowing how jQuery works since it saves developers time and requires much less code to accomplish the same tasks as plain JavaScript.
For an example of how jQuery works more efficiently than JavaScript on its own, see our guide to the jQuery replaceWith() function.
How is jQuery used in WordPress?
jQuery is popular among WordPress developers for use in themes and plugins. The WordPress CMS code files include some jQuery libraries that allow developers to leverage jQuery in their themes and plugins to make dynamic and engaging interfaces.
jQuery is by no means required to build these things, but it makes the job far easier. If you’re interested in WordPress development, you should understand JavaScript and jQuery. Next, we’ll discuss how to start using jQuery in WordPress.
How to Add jQuery to WordPress
As mentioned, the jQuery library comes loaded in WordPress, ready to use — you don’t need to download any additional files or software to leverage jQuery.
However, there are some modifications to your code files that we recommend you make in order to use jQuery in your projects most efficiently. Since you’ll be modifying core files in this process, you should back up your WordPress site before making changes.
Compatibility Mode
When using jQuery in WordPress, you can choose whether or not to put your site into compatibility mode. Compatibility mode is a feature of WordPress jQuery that prevents conflicts with other code libraries in use on your site.
Compatibility mode prevents these conflicts by targeting the jQuery shortcut $. This shortcut is shorthand for the function name jQuery. The issue with $ is that other libraries use $ in their syntax as well. jQuery compatibility mode avoids confusion by disabling $ and only allowing for the jQuery function name.
To make compatibility mode work, put the following jQuery function in your script file:
$.noConflict();
This code is followed by jQuery code and/or code from other libraries.
The downside of compatibility mode is that using jQuery instead of the shorthand $ might bloat your code, since it’s more characters and you’ll be using this function name frequently. Consider this tradeoff when enabling compatibility mode on your WordPress site.
Enqueue jQuery
Next, in order to use jQuery in WordPress, we need to enqueue it. In other words, we need to load the scripts that plugins and themes need to recognize and process jQuery syntax. You can enqueue any jQuery script that is included in WordPress, or add your own jQuery scripts to WordPress.
In WordPress, scripts are loaded with the function wp_enqueue_script(), which is placed in the functions.php of the active WordPress theme. To enqueue jQuery, add this code to the functions.php file of your theme, located in your active theme’s folder. (If there’s no functions.php file, make a new one in your active theme’s folder.)
function theme_scripts() {
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
wp_enqueue_script accepts one required parameter and four optional parameters:
- $handle: (required) A string; the name of the script
- $src: A string; the source URL of the script
- $deps: A string; an array of script dependencies
- $ver: A string, boolean, or null value; the script version number
- $in_footer: A boolean; if true, enqueues the script in </body> instead of in the <head>
WordPress jQuery Plugins
While enabling jQuery in WordPress is largely a manual process, there are a couple of plugins that can help you out.
jQuery Updater
jQuery Updater is a free plugin that automatically updates jQuery in your WordPress installation to the latest official stable version.
The version of jQuery included in WordPress tends to lag behind the latest jQuery release, so this plugin ensures your website is always operating with the best version. If this plugin causes problems, you can deactivate the plugin and the original jQuery version will be restored for you.
Enable jQuery Migrate Helper
This plugin was created by the WordPress Team after the release of WordPress version 5.5 to address backward compatibility issues some developers faced after updating. It re-enables the popular jquery-migrate feature (after it was previously removed) and is meant as a temporary fix for developers while they upgrade their themes to work with the latest version of WordPress.
Write JavaScript quickly with jQuery in WordPress.
jQuery is by no means a topic for WordPress beginners. In fact, it will only make sense to developers who understand how JavaScript works in WordPress themes and plugins, and how to write it.
But, if you’re a theme or plugin developer, or an advanced admin who wants to customize their theme beyond what the theme’s interface allows, then it’s essential to know how jQuery works in WordPress — and it all starts here.
