Lorem Ipsum

A while back, someone noticed that the dropdowns in the main navigation menu at Jaggery had stopped working. You could still click department names in the menu to go to a department’s main page, but the menu wasn’t showing the sub-items that it was supposed to.

After quite a bit of poking around, I eventually found out what the problem was, and fixed it. So I figured it was worth posting about.

It turns out that the problem with the dropdowns was because recent versions of WordPress don’t support old jQuery code.

jQuery is a system that makes it easier to display various effects in a web browser. (I’m oversimplifying, but that’s close enough for my purposes here.) It’s been around for a long time, and some of the older parts of it are obsolete. WordPress continued to support those parts for a while, but a year or two ago, WordPress officially stopped making it easy for WP sites to use those older parts of jQuery.

Unfortunately, the way that a lot of WP themes (including Jaggery’s theme) handle dropdowns is to use one of those older jQuery things. So when Jaggery upgraded to the then-latest version of WP (a year or two ago), the dropdowns stopped working.

At the time when they stopped supporting the old jQuery code, the WordPress people provided a plugin to temporarily keep supporting that old code. The plugin is called Enable jQuery Migrate Helper.

So the way to make old WP dropdowns work again is as follows:

1. First see if you can update your theme to a newer version (or a newer theme) that doesn’t use the old code. If you can, do that. If not, proceed.
2. Install the Enable jQuery Migrate Helper plugin.
3. Activate that plugin.
4. (Non-obvious step!) Go to the plugin’s settings page, and select the very old jQuery version instead of the current version. The old version that it shows for me is 1.12.4-wp, which was released in 2016. (The latest version of jQuery is 3.6, released in 2021.) (I didn’t know I had to do this step, so I spent a long time assuming that the plugin hadn’t fixed the problem.)
5. Clear the WP cache if you have one.
6. Reload your site in the browser. Use Shift+reload to make sure it doesn’t show you a cached version. Check to make sure the dropdowns now work.
7. If the dropdowns still don’t work, then look at the browser’s JavaScript Console to see if you can find out what the error is. If it shows an error messages that says something about $.browser, then you may still be seeing the jQuery problem—go back to step 4 and make sure that you’re using the old jQuery version, and then do steps 5 and 6 again to make sure that you’re not seeing a cached version of the page.
8. If the dropdowns still don’t work after all that, then you’ve gone beyond the scope of what I know about.

After you get the Enable jQuery Migrate Helper plugin running, you’ll see a prominent warning message in the WP dashboard, saying that the version of jQuery that you’re using “has no support and doesn’t receive security updates.” So be aware that by making this change, you’ve made your site potentially less secure, and you’re relying on very old code. So if possible, update to using a theme that doesn’t use the old jQuery code.