How to migrate, upgrade, and fix jQuery in WordPress

Let me guess. You have a website that won’t perform Ajax calls, the add media button has stopped working, or woo commerce won’t go one action further on any front, right?

If not those three gnarly yet common WordPress challenges, your web developer console may be running amok with endless “uncaught type error” errors across multiple javascript files.

Nevertheless, hang around WordPress long enough, and the probability of themes, plugins, and/or core WordPress updates conflicting with one another will happen. Unlike core WordPress updates, most themes and plugins don’t encounter technical challenges when updating. However, WordPress websites often perform extremely well as long as themes, plugins, and core updates are well-maintained on a consistent basis.

Long before there were auto-enabled updates across all three platforms, I made a decent living — still do to some extent — logging into clients’ environments and updating necessary themes, plugins, and core updates.

I’ve had my share of WordPress core updates that have halted any and all web activity, including the administrative dashboard — the latest experience was the WordPress update (nightmare). WordPress, jQuery Migrate 1.X was a planned stage removal regarding updating WordPress’s overall jQuery version — virtually broke every plugin and theme known to man, including the very popular Classic WordPress Editor and Yoast plugins.

The latest WordPress core was a nightmare because many customers use outdated themes and plugins. In fact, one customer operates a WordPress website using a theme that only runs on PHP 5.6. We’ve tried to overhaul the theme. To no avail, we have to scrap the old theme for a newly updated one and migrate with grace.

Speaking of migration, one of the biggest challenges any WordPress plugin, theme, and core update must face is staying current and operable with jQuery. This “write less, do more” JavaScript library was created to be lightweight, condensing thousands of lines of code for common event handling, CSS animation, and Ajax to single lines of code through the use of methods.

While jQuery has made our lives easier to a certain extent, there are moments when jQuery will conflict with itself or other libraries.

Case in point, the customer I briefly mentioned moments ago recently encountered a slew of tech challenges that all pointed at jQuery conflicts. In addition to having an outdated theme that does not make use of 3rd-party CDN to include jQuery, this customer’s website also uses 42 plugins.

Yes, you read it right! 42 ACTIVE PLUGINS! Once a WordPress website gets beyond 15 or so plugins, this spells trouble. It’s only a matter of time before the plugin conflicts with another plugin, theme, or WordPress core codebase.

In most cases, I recommend that customers either deactivate all plugins and enable them one by one until the error is encountered or simply deactivate plugins until the error disappears. I did neither one of these laborious tasks.

So, I know you’re wondering, what did you do to remedy the jQuery conflicts in WordPress if you did neither of the aforementioned tactics?

Well, wait for it… I opted for adding another plugin. 🤣  So, now we’re up to 43 PLUGINS, but all is well.

How to upgrade jQuery in WordPress.

One of the easiest ways to upgrade and fix jQuery in WordPress is using the jQuery Updater plugin by Ramoonus. This plugin updates jQuery to the latest official stable version and includes the jQuery Migrate update. While it doesn’t replace or delete existing jquery files, it does remedy a wide range of jQuery conflicts.

How to enable jQuery to migrate helper.

This next plugin is by far my favorite and the one I turn to the most to ensure themes and plugins get their act together when attempting to not resolve their conflicts with one another.

If the jQuery Updater plugin isn’t what the doctor ordered to get your website back in working order, then installing the Enable jQuery Migrate Helper plugin is certain to breathe life back into your website’s old JavaScript code that uses deprecated functions for the jQuery library.

Both jQuery Updater and Enable jQuery Migrate Helper plugins are my go-to when themes and plugins stop working altogether. While I recommend installing one or the other, there is been only one case in that I’ve used both on a WordPress website to bring it back into a fully working condition without errors.

How to load jQuery into WordPress using Google.

Last but not least, another method to consider when migrating, upgrading, or fixing jQuery in WordPress is simply using a content delivery network (CDN), like Google or AWS, to include the most updated version of jQuery.

This option is a bit different from the previous two because the jQuery file(s) are loaded directly from Google and not your web server — decreasing page load time drastically.

While there are many plugins and services to consider (i.e., CloudFlare), I discovered one of the best all-around plugins is the Use Google Libraries plugin.

In addition, enacting the use of CDNs for CSS and JavaScript files can help you boost SEO signals with the super, lightning-fast page loading, no matter the experience — desktop, tablet, mobile, etc.

In closing, you’ll never have to concern yourself again about having the latest version of jQuery. Your website will be up to date and protected against security vulnerabilities due to outdated code in themes and plugins.

Let me know if you have any questions, or comments, or encounter any additional technical challenges.