jQuery: Relevance and Alternatives for WordPress

jQuery is a lightweight JavaScript library that simplifies HTML manipulation, event handling, animation, and asynchronous requests, making it easier to create interactive web pages with less code. It is widely used for front-end web development due to its simplicity and cross-browser compatibility.

Understanding the role of jQuery in WordPress is essential for optimizing your website.

However, the use of jQuery has declined in recent years due to advancements in modern JavaScript and native browser support for its features. Despite this, there are still scenarios where jQuery can be beneficial.

In this post, we’ll explore the continued use of jQuery in WordPress, ways to identify its presence, and alternatives if you’re considering transitioning to other technologies.

Get ready to dive into the world of jQuery and WordPress.

Table of Contents

• Is jQuery still used in WordPress?
  • jQuery replaced in WordPress frontend
  • jQuery is still used in WordPress dashboard
  • jQuery is still used in WordPress plugins
  • Is jQuery still relevant?
  • How to identify jQuery in WordPress?
    • Identify jQuery using the browser Developer Tools
    • Identify jQuery using the browser View Page Source
• What is the alternative to jQuery?
  • jQuery alternative for HTML/DOM Manipulation
  • jQuery alternative for the Event Management
  • jQuery alternative for AJAX Calls
  • jQuery alternative for Animations
• What is jQuery Migrate?
  • How to remove jQuery Migrate from a WordPress website?
• Final words

Is jQuery still used in WordPress?

It is wise to guess that it still is, looking at this statement from W3techs:

jQuery is used by 94.6% of all the websites whose JavaScript library we know. This is 77.7% of all websites.

w3techs.com

jQuery has been an integral part of WordPress since its version 2.2 release in May 2007.

It played a crucial role, not only within the WordPress core but also as a tool that facilitated interaction between developers and the diverse landscape of modern and older browsers. jQuery acted as a universal language, bridging the gap and simplifying tasks such as HTML/DOM manipulation, event management, Ajax calls, and animations.

As a result of its capabilities, WordPress has heavily relied on this framework in both its frontend and backend since its rapid growth in popularity starting in 2008.

JQuery is still widely used in WordPress, although as we will see below, there has been some changes.

jQuery replaced in WordPress frontend

In the past, jQuery was a popular tool used for various frontend tasks on websites, such as animations, sliders, and form validations. It was widely utilized in HTML toolkits like Bootstrap.

However, there has been a shift in recent times.

Modern browsers now fully support Vanilla JavaScript, making it compatible and functional without the need for jQuery.

This change has influenced the development of WordPress themes as well. Prominent theme creators like Astra, OceanWP, and Neve by Themeisle have embraced this trend. Even themes like Sage by Roots and UnderStrap, a combination of the Underscores (_s) starter theme and Bootstrap, have followed suit.

These developments indicate a clear movement away from using jQuery in the WordPress frontend.

jQuery is still used in WordPress dashboard

WordPress continues to rely on jQuery for certain backend functions, even with the emergence of the WordPress Full Site Editing revolution powered by the JavaScript library React.js. This reliance is expected to persist in the foreseeable future.

While React.js has transformed the way we create dynamic and interactive user interfaces, making a significant impact on the development of new WordPress features like the Gutenberg block editor, jQuery continues to play a vital role in the WordPress Themes and plugin ecosystem.

WordPress still utilizes jQuery in various aspects of its dashboard. It is used for managing menus, as well as in the media uploader for handling media files. Additionally, jQuery plays a role in the management and comparison of revisions within WordPress.

jQuery is still used in WordPress plugins

As mentioned, despite the wide JavaScript compatibility and the new building tooling like Webpack, npm, ES6, and modules, jQuery continues to play a significant role in WordPress plugin development due to its stability, ease of use, and long-standing integration with WordPress. However, with the rise of frontend JavaScript frameworks and a shift towards vanilla JavaScript, new projects often avoid jQuery dependencies.

Developers now have a broader range of options for creating dynamic and interactive user interfaces, leveraging the capabilities of these modern frameworks without relying on jQuery.

The availability of newer technologies and the shift towards vanilla JavaScript have led to a decreased reliance on jQuery in the frontend development of WordPress. This trend reflects a desire for more lightweight and streamlined codebases, as well as embracing the modular nature of modern JavaScript development.

Is jQuery still relevant?

The answer is a resounding “yes” when we consider its prevalent use. The State of JavaScript 2022 survey results provide ample evidence of jQuery’s relevance:

However, it’s important to recognize that this pertains to current utilization, not necessarily indicating its significance for future development trends. As the JavaScript ecosystem evolves, interest is gradually shifting towards modern frameworks and vanilla JavaScript. You can verify this evidence in Google Trends:

How to identify jQuery in WordPress?

To identify if jQuery is loaded in WordPress, you can use several methods:

Identify jQuery using the browser Developer Tools

The most straightforward method is to use the developer tools built into your web browser. In Google Chrome or Firefox, open the “Developer Tools” and find jQuery following this steps:

• “Top Menu→View→Developer→Developer Tools” or
• “Option ⌥ + Command ⌘ + I” on Mac or
• “F12+Ctrl+Shift+I” on Windows.
• Navigate to the “Network” tab.
• Reload the page.
• Type “jquery” into the filter box.

If jQuery is loaded, you should see it listed there.

Identify jQuery using the browser View Page Source

Another simple way is to view the source code of your WordPress website page.

You can do this by right-clicking on the page and selecting “View Page Source.” Then use the browser’s search function (Ctrl+F or Command ⌘+F on a Mac) to search for “jquery”. If jQuery is loaded, you should see a <script> tag.

What is the alternative to jQuery?

As mentioned previously, jQuery served as a versatile toolbox for various tasks. Now, let’s delve into the alternatives available today.

jQuery alternative for HTML/DOM Manipulation

1. Vanilla JavaScript: With advancements in modern browsers, many of the DOM manipulation tasks can be done natively using plain JavaScript. Methods such as querySelector(), querySelectorAll(), getElementById(), getElementsByClassName(), etc., provide powerful and easy ways to manipulate the DOM.
2. Cash. This is the best compact jQuery alternative for modern browsers (IE11+), offering jQuery-style syntax for DOM manipulation.
3. Umbrella JS: a tiny (2.5kb), open-source JavaScript library for modern browsers. It provides a jQuery-like syntax for manipulating the DOM, making it a nice option if you’re looking for something lightweight yet familiar.

jQuery alternative for the Event Management

If your goal is simply to handle events in the lightest way possible, then Vanilla JavaScript is the recommended choice.

With Vanilla JavaScript: You can use the addEventListener() and removeEventListener() methods for event handling in plain JavaScript.

If you plan to preserve the code syntax, Cash, is a good lightweight alternative for modern browsers.

However, for more complex projects, a frontend framework may be more suitable. This image from The State of JavaScript 2022 survey, shows the usage ranking of most well known frontend Frameworks:

Nevertheless, when coding with a framework, you must bear in mind the weight of the base library.

Let’s compare a basic “Hello World” application using these frontend frameworks. Here are the rough estimates:

• React: The size of a minimal React app, including ReactDOM (which is required to render React components on the web), is approximately 100KB minified and gzipped.
• Angular: A minimal “Hello World” Angular application is around 150KB minified and gzipped. However, Angular’s CLI and AOT compilation can help to reduce this size considerably by removing unnecessary Angular code and minifying the output.
• Vue: A simple “Hello World” Vue application is about 30KB minified and gzipped.
• Svelte: The resulting bundle of a Svelte “Hello World” app is one of the smallest, around 4KB minified and gzipped, because Svelte compiles your code to small, framework-less vanilla JavaScript.
• Preact: a fast, lightweight alternative to React, with the same modern API. A “Hello World” in Preact can be as small as about 4KB minified and gzipped.

jQuery alternative for AJAX Calls

AJAX, which stands for Asynchronous JavaScript And XML, enables a web page to interact with remote services, updating and displaying new data without requiring a full page refresh.

More modern alternatives to jQuery’s AJAX include:

1. Fetch API. This promise-based replacement for AJAX is built into modern browsers as part of ES6 (ECMAScript 6). The Fetch API simplifies the process of making asynchronous requests and managing responses.
2. Axios. Similar to Fetch API, Axios is promise-based. However, it boasts additional features, such as upload progress tracking, support for older browsers, automatic JSON data transformation, client-side protection against XSRF, etc… making it a more powerful and flexible tool.
3. If the application is complex, like mentioned in previous section, you can jump to a Frontend Framework.

jQuery alternative for Animations

In the 2010’s decade, jQuery was the web Animation base toolbox. But time has passed since pure javascript animations, and nowadays CSS, and SVG arrived to modern browsers with fast and powerful performant capabilities.

For animations, there are several alternatives to jQuery but the list is infinite:

1. CSS Transitions/Animations: For simple animations, vanilla CSS transitions and animations can be a powerful alternative. They are lightweight and can be hardware-accelerated in modern browsers, which often results in smoother animations.
2. Web Animations API: This is a native browser API that provides a way to create animations and control their playback with JavaScript. For DOM manipulation, a task once ruled by jQuery, native browserWeb Animation API have closed the gap. It’s more powerful than CSS animations and transitions.
3. GSAP (GreenSock Animation Platform): The GreenSock Animation Platform (GSAP) is a robust JavaScript library for creating high-performance animations. It’s more performant and flexible than jQuery’s animation methods, offering precise control over animation sequencing, timing, and easing.
4. Mo.js: This is a powerful motion graphics library for the web, offering declarative handling for animations, making complex UI animation sequences simpler and more manageable.
5. Animate.css: a ready-to-use library with various cross-browser CSS animations that you can use in your project. It CSS centric, but its easy to use and can be integrated with JavaScript to create more complex animations.

What is jQuery Migrate?

jQuery Migrate is a JavaScript library that was created to simplify the transition from older versions of jQuery to newer ones. It serves as a bridge between the features of past versions and the latest release.

By default, WordPress includes jQuery Migrate when it enqueues the jQuery library.

This is done to ensure compatibility with older themes and plugins that might rely on deprecated jQuery features.

If your plugins and themes are all up to date, you might want to consider disabling jQuery Migrate. It can help speed up your webpage a bit!

How to remove jQuery Migrate from a WordPress website?

You can remove jQuery Migrate from your WordPress site with a few lines of code. Here’s how:

Open your theme’s functions.php file. If you’re using a child theme, use the child theme’s functions.php. Add the following code:

//Remove JQuery migrate
function remove_jquery_migrate( $scripts ) {
    if ( ! is_admin() && isset( $scripts->registered['jquery'] ) ) {
        $script = $scripts->registered['jquery'];
 
        if ( $script->deps ) { // Check whether the script has any dependencies
            $script->deps = array_diff( $script->deps, array( 'jquery-migrate' ) );
        }
    }
}
 
add_action( 'wp_default_scripts', 'remove_jquery_migrate' );

Final words

Looking ahead, jQuery’s role in WordPress remains secure, mainly due to plugin compatibility.

However, with native and modern JavaScript libraries gaining popularity, the landscape could evolve. Stay informed and adaptable to leverage these changes in your web development process. The future of jQuery and WordPress is a story still being written.

Stay tuned!

We are techies passionate about WordPress. With wetopi, a Managed WordPress Hosting, we want to minimize the friction that every professional faces when working and hosting WordPress projects.

Not a wetopi user?

Free full performance servers for your development and test.
No credit card required.