{"id":19310,"date":"2022-02-15T09:22:58","date_gmt":"2022-02-15T17:22:58","guid":{"rendered":"https:\/\/www.kith.org\/jed\/?p=19310"},"modified":"2022-02-15T09:22:58","modified_gmt":"2022-02-15T17:22:58","slug":"how-to-fix-missing-wordpress-dropdowns","status":"publish","type":"post","link":"https:\/\/www.kith.org\/jed\/2022\/02\/15\/how-to-fix-missing-wordpress-dropdowns\/","title":{"rendered":"How to fix missing WordPress dropdowns"},"content":{"rendered":"\r\n

A while back, someone noticed that the dropdowns in the main navigation menu at Jaggery<\/a><\/cite> had stopped working. You could still click department names in the menu to go to a department\u2019s main page, but the menu wasn\u2019t showing the sub-items that it was supposed to.<\/p>\r\n

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.<\/p>\r\n

It turns out that the problem with the dropdowns was because recent versions of WordPress don\u2019t support old jQuery code.<\/p>\r\n

jQuery is a system that makes it easier to display various effects in a web browser. (I\u2019m oversimplifying, but that\u2019s close enough for my purposes here.) It\u2019s 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.<\/p>\r\n

Unfortunately, the way that a lot of WP themes (including Jaggery<\/cite>\u2019s 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.<\/p>\r\n

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.<\/p>\r\n

So the way to make old WP dropdowns work again is as follows:<\/p>\r\n

    \r\n
  1. First see if you can update your theme to a newer version (or a newer theme) that doesn\u2019t use the old code. If you can, do that. If not, proceed.<\/li>\r\n
  2. Install the Enable jQuery Migrate Helper plugin.<\/li>\r\n
  3. Activate that plugin.<\/li>\r\n
  4. (Non-obvious step!) Go to the plugin\u2019s 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\u2019t know I had to do this step, so I spent a long time assuming that the plugin hadn\u2019t fixed the problem.)<\/li>\r\n
  5. Clear the WP cache if you have one.<\/li>\r\n
  6. Reload your site in the browser. Use Shift+reload to make sure it doesn\u2019t show you a cached version. Check to make sure the dropdowns now work.<\/li>\r\n
  7. If the dropdowns still don\u2019t work, then look at the browser\u2019s JavaScript Console to see if you can find out what the error is. If it shows an error messages that says something about $.browser<\/code>, then you may still be seeing the jQuery problem\u2014go back to step 4 and make sure that you\u2019re using the old jQuery version, and then do steps 5 and 6 again to make sure that you\u2019re not seeing a cached version of the page.<\/li>\r\n
  8. If the dropdowns still<\/em> don\u2019t work after all that, then you\u2019ve gone beyond the scope of what I know about.<\/li>\r\n<\/ol>\r\n

    After you get the Enable jQuery Migrate Helper plugin running, you\u2019ll see a prominent warning message in the WP dashboard, saying that the version of jQuery that you\u2019re using \u201chas no support and doesn\u2019t receive security updates.\u201d So be aware that by making this change, you\u2019ve made your site potentially less secure, and you\u2019re relying on very old code. So if possible, update to using a theme that doesn\u2019t use the old jQuery code.<\/p>\r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[25],"tags":[],"class_list":["post-19310","post","type-post","status-publish","format-standard","hentry","category-web-tech"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/posts\/19310","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/comments?post=19310"}],"version-history":[{"count":2,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/posts\/19310\/revisions"}],"predecessor-version":[{"id":19312,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/posts\/19310\/revisions\/19312"}],"wp:attachment":[{"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/media?parent=19310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/categories?post=19310"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/tags?post=19310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}