It’s hard to work with coding languages such as HTML, CSS, and JavaScript without hearing of jQuery. It’s a JavaScript framework that lets developers add extra functionality to websites. In a nutshell, it helps create better HTML scripting on the client side. Best of all, all major browsers support the library.
If you’re a WordPress user, it’s important to know that jQuery is a required library for the platform. As such, a developer will use the codebase to ‘standardize’ some of the interactions between the HTML and JavaScript elements. You’ll find that jQuery provides clean code, open-source libraries, simple syntax, and high-quality results.
In most cases, the jQuery library that WordPress provides is suitable for its intended purpose. However, there will be times you need to override WordPress and update jQuery. For this post, we’ll go over what jQuery is, how it aligns with WordPress, and how to update jQuery if you need to.
What jQuery Is (And What It Does)
It’s important to state that the jQuery core code is not a programming language. Instead, it’s an extension of the JavaScript language. For the unaware, this is one of the ‘trinity’ of essential web languages and lets you provide interactive and dynamic content on the front end of your site.
The jQuery library is feature-rich, small, and open-source. You’ll use it to simplify some of the interactions between HTML and JavaScript, and there are benefits such as a reduction in bandwidth usage, and a potential boost to the User Experience (UX).
Lots of developers use jQuery to better use JavaScript and add interactive elements. It has an important role, as jQuery lets you implement client-side scripting for your site. This is something that PHP is often used for – another of the core web languages a site will use (including WordPress).
You’ll often use jQuery for a number of common and important tasks on your site:
- It can create and handle complex tasks. For example, jQuery will handle AJAX requests, animations, any CSS manipulations, and much more.
- Front-end components also benefit from jQuery. You’ll see it in action when you interact with sliders, gallery carousels, testimonial sliders, pop-ups, and more.
On the whole, there are lots of tasks jQuery can simplify and enhance due to its structure and ability to extend the core JavaScript language. Next, we’ll look at some of the ways WordPress and jQuery align.
The WordPress jQuery Stat Pack
WordPress core and jQuery core have a storied history. As such, there are a few important (and good to know) facts about both. First, here are a few tidbits about jQuery itself:
- Over 78 percent of the web uses jQuery as its primary JavaScript library. It’s also in use on over 76 percent of the top one million sites (by traffic).
- jQuery 3 sees use on over 50 percent of the web (with a special mention for version 3.5.1).
- That 3.5 latest version of jQuery core brought needed changes to the jQuery.htmlPrefilter() method. This is a core way to manipulate strings, and the changes made in this version patched security issues to help developers code in a way they are comfortable with.
- Nearly a year passed between versions updates 3.5 and 3.6, and this is the current version of the library.
Of course, WordPress also offers tight integration with jQuery, and has its own history with the library:
- Around 70 percent of themes use jQuery on the front end.
- There was a giant jQuery upgrade from version 1.12.4 to 3.5.1 in 2020 with WordPress 5.5–5.7. This has been one of the biggest changes since WordPress 4.5.
- The original plan for WordPress 5.7 included removing jQuery altogether. For now, we still use jQuery as a core-dependent library.
Both WordPress and jQuery are open-source solutions, which means anyone can contribute to either project. Because of this, our opinion is that jQuery will remain as part of WordPress for a long time to come!
Why jQuery Can Cause Problems With Your WordPress Website
Integration with third-party libraries can sometimes cause issues – take recent issues with Fastly and Akamai. This can lead to some unexpected practices that you wouldn’t often go to bat for.
For example, lots of developers – we’d bet almost all – will often use out-of-date libraries and dependencies. This isn’t because they take a laissez-faire approach to security and stability, but rather because the specific collection of core software and extra libraries works.
WordPress has been no exception at times. In fact, for most of its existence, the platform has used various flavors of first-version jQuery software:
Despite there being security issues and other bugs in these versions – after all, if they were perfect, there would be no need for an update – many WordPress plugins, sites, and themes still use older versions of jQuery. The same caveats apply to using old jQuery versions as it does to outdated WordPress files:
- You don’t get to benefit from more recent enhancements.
- Your code won’t have any performance streamlining.
- You may still fall foul of any bugs within those older versions.
However, only updating some of your site’s files can cause problems. For example, take a standard WordPress update. While the update itself can go well, there could be a mismatch between your core installation, themes, and plugins if there is a change to the underlying jQuery support.
This is due to the way a plugin or theme will reference jQuery within its code. In most cases, you’ll ‘call’ the version of jQuery you need to run – this will be the version bundled with WordPress:
If you call the wrong version, a WordPress theme or plugin won’t work. If you read this, worry about your own installation and how it will fare upon every update, you’re not alone. Let’s talk about this in more detail next.
How to Decide Whether You Should Move Away From jQuery
It’s hard to create something that relies on dependencies you have no control over. Because of this, many WordPress developers will skip the use of jQuery altogether, despite the benefits. However, there are lots of positives for moving away from jQuery as a whole:
- Performance is arguably better without jQuery, according to WordPress. This makes sense because a site won’t have to load a batch of other files in order to run.
- Improvements to other languages – such as CSS – mean that the typical tasks you’d use jQuery for in the past don’t have to use those dependencies. Case in point, it used to be that you’d use jQuery to accomplish smooth scrolling, but this is now something you can achieve with CSS.
- In fact, WordPress itself uses jQuery much less now than it used to, and some of its core components don’t need the library at all.
For example, take the Block Editor:
This uses no jQuery at all, and is built with the React framework – another way to better use and extend JavaScript. React is something you’ll see across the WordPress ecosystem, as lots of developers will use it. Frontity is almost a buzzword in current development circles, and React is a framework that is lighter and more modern than jQuery.
On the whole, jQuery is fantastic for lots of tasks. It’s good for when you need to customize themes and plugins, and much like PHP, it is used on an overwhelming number of websites. However, modern web development is changing, which means you might not want to work with jQuery much longer. In the next few sections, we’ll go over what you can do about it.
How to Update jQuery, Resolve Compatibility Issues, or Migrate to a Different Library
Next, we’re going to give you a quick rundown of what to do with your jQuery installation. Your next step depends on your version of WordPress and your goals. We’ll discuss this in each relevant section, and we’ll start with how to sync jQuery versions.
1. Sync jQuery Versions
First off, if you use WordPress 5.5 or older, upgrading will give you a number of performance, security, and functionality improvements that we’d recommend you implement. You may also need to synchronize your jQuery versions between your site and the official repository.
Before you begin, it’s a good idea to backup your entire site. From there, you can install a solution such as Enable jQuery Migrate Helper.
While the plugin is a temporary solution while you work, it can help you disable the current version of jQuery and check whether it’s the cause of any site issues. If it does detect an issue, it will help to synchronize the versions to get things back into working order.
However, you still may need to work with individual themes and plugins to put things right.
2. Update jQuery
If you still run WordPress 5.6, you might need to update jQuery to the most recent official version. A security scan using your favorite plugin can help you figure out whether the problems you experience are down to a jQuery vulnerability or not.
From there, you can locate the places on your website where jQuery is used, and also test in the areas you know jQuery is present.
As for updating jQuery itself, you can use Ramoonus’ jQuery Updater plugin:
The best aspect of this plugin is that it is a non-destructive process. This means you can uninstall the plugin and return your site to its original state if you need to.
3. Carry Out a jQuery Migration
To migrate to a different library (such as React), you’ll first need to convert all of the jQuery code to plain (or ‘vanilla’) JavaScript. While the exact steps are beyond the scope of this article (as it could be a long-term job), there are a number of caveats to be aware of throughout the process of a jQuery migration:
- Migrating away is a good step if a theme or plugin uses jQuery already. However, for new developments or maintenance, you can cut to the chase and use vanilla JavaScript.
- We wouldn’t recommend you edit third-party themes or plugins, as the maintenance will be heavy, and you won’t be able to update to new available versions.
- You might not be able to eliminate jQuery from your site completely. This is because of how reliant the current WordPress core codebase is on the library.
On the whole, migrating to vanilla JavaScript means you’ll need to code from scratch because you won’t use dependencies, libraries, or other extensions for your code. This can be daunting, and also might not work in the way you comprehend. Some jQuery will still remain, due to WordPress’ reliance on it.
What You Need to Tackle WordPress jQuery Issues
You might read this as someone who does not want to get their hands dirty with code. WordPress lets you create without code, although the knowledge of what happens under the hood can help you understand your system a little better.
You can carry out a jQuery migration if you wish, but you’ll need the technical knowledge to make sure you tackle the job in the right way. If you prepare right and work with good tools and resources, you can do a stellar job.
However, if you know that jQuery is something you want to leave behind, but do so in the right way, an expert is the best person to help you. An experienced developer will know how to migrate jQuery for you based on similar projects. What’s more, coding is their second language.
As such, they’ll be efficient and complete the project quicker than you’d be able to. An expert developer will carry out testing, utilize local environments, run staging sites, and more to help make sure your site is still in tip-top shape.
Conclusion
No matter what update you carry out on your WordPress site, you have to take it seriously. Any mistake here can impact your income and customer figures, so updating is one of the most important elements for your site.
When it comes to jQuery, you’ll want to ensure you use an expert. Working with a hiring partner such as Codeable is the best bet. The platform specializes in WordPress, as do our experts. We also put them through a strict vetting process to ensure that we only provide the very best in talent for your next hire.
We’d love you to submit your project today! You get a free estimate, with no obligation to proceed. It’s a 100 percent, risk-free inquiry, so you have absolutely nothing to lose!
