Before Updating WordPress to Latest 5.7 Version – jQuery Hurdle
Tags: Enable jQuery Migrate Helper • JavaScript • jQuery • legacy files • wordpress core • wordpress update php
WordPress users have started seeing the availability of the latest WordPress update version 5.7.2 notice in admin since 12, May. Most of the webmasters may have used the WordPress update option by now, while some had their WordPress version update automatically and while still, some are having nightmare thinking about the problem they had last time updating their website version.
How to update the WordPress version when a lot of customization was done to the code files? WordPress manual update is popular among webmasters who forgot to implement child-theme and customized the core file of the WP. There could be other reasons too for going the manual update WordPress way.
WordPress update automatically is the preferred way for majority of webmasters and site owners as it involves WordPress update without ftp.
Just like some of our clients, we are sure a lot of other webmasters and business owners would have experienced the breaking of their website themes and plugins after upgrading to the latest WP version 5.7.2.
If your website is working as intended after the upgrade, congratulation you have the latest version of WP as well as jQuery libraries.
In most of the recent version update cases, we have seen, except for issues specific to individual websites/themes/plugins, the website features requiring jQuery stops working.
If you have drop-down menus, they will simply reduce to drop-down; if you are running a Woocommerce store and have ajax search, auto-complete product searches won’t work; if you have slide style menu on desktop/mobile it will not slide open to show menu options; these are just some of the issues to name that stops working after upgrade.
We will pick one of our client’s issues here in the post where upon upgrading to latest 5.7.2 wordpress version, their drop-down menu, their slider category menu and their ajax search stopped working.
They started receiving calls from customers that they aren’t able to search which they used to do previously. They are very popular web-store selling books and get a lot of orders per day. Their web store is powered by the Woocommerce shopping cart application.
Here we would like to emphasise that before updating your website or any application for that matter, always, we repeat always, take a back-up of the files along with the database.
As always we had a back-up of their website so had the option to fall back to the latest back-up. However, we wanted to explore and understand what caused the site to disrupt specially the jQuery functionalities as rest of the website was working as before.
WordPress with its 5.7 version took a major step to upgrade its core jQuery libraries from 1.12.4 to jQuery 3.5.1. It’s a major jump in the JavaScript version and in the process has broken a lot of themes and plugins.
A lot of plugin and theme developers rely on the WP core version of JS files instead of using their own set of JS files. So, unless your theme/plugin is updated using the latest jQuery libraries, your website will stop working as intended.
One solution is to roll-back to latest back-up and manually check which JS files needs to be updated to latest library version. This is tedious job but is sure short way to make your website using latest files.
Another option is to contact the theme/plugin developers mentioning the issues you are facing and see what they do to resolve these issues.
How to Resolve jQuery Issue After Upgrade?
Yet another quickest ad-hoc solution that will instantly make all of the features work is to install a plugin, which WP developed just for backward compatibilities of the jquery libraries.
The Enable jQuery Migrate Helper plugin basically helps the jQuery Migrate helper script, which used to be enabled by default in WP core but is not enabled now, to make backward compatibility with the JS libraries.
This plugin helps and gives time to the theme/plugin developers to upgrade, test, and deploy their work using the latest jQuery libraries.
After activating the plugin, on the above setting page, it gives options to either use Default jQuery version from WP or the Legacy old version. Selecting the Legacy version will make the backward compatibility of the jQuery libraries. Like magic, the site JS features will start working.
Once the settings are saved, the admin can see this red infobox in the Admin bar showing how many deprecations (old legacy JS files) are present on that page. So, as you browse pages, each page will show different numbers of legacy deprecated files.
Besides each deprecation will be logged in and you can see all deprecated files if logging is enabled from the setting page.
The work to upgrade the bundled jQuery libraries in the WP core began from the 5.5 version. A more detailed roadmap has been explained here on wordpress support. Here how to handle the jQuery issue has been explained.
So, the Enable jQuery Migrate Helper plugin helped save the lost business revenue for the client. Had it been no for this plugin, our team would be scratching our head or banging our head against the wall right now.
Please remember, this plugin is just a temporary solution and with time. A long-term solution to this JS problem, updating to the latest jQuery libraries is the only solution. Seriously?