WordPress developers should be familiar with jQuery, that cross-browser Javascript library that makes using Javascript much simpler for front-end HTML development. It’s a useful tool, but we’ve recently solved some interesting problems that can happen when multiple jQuery versions are coded into WordPress, and a site gets confused about which version takes priority.
WordPress is designed to interact smoothly with jQuery, and new jQuery versions are often included in WordPress updates. The proper way to call jQuery in WordPress is designed with these updates in mind, and ensures that a consistent version of jQuery gets used.
For a refresher on jQuery and WordPress, check out this digwp post on how to include jQuery the right way. It demonstrates how to make sure you don’t have conflicting jQuery libraries in your site, as well as the proper way to call jQuery in your WordPress.
Recently, we resolved a client’s WordPress where the jQuery was installed into the header AND the footer. The footer jQuery was a previous version hardcoded into a plugin. This meant that two different versions of jQuery ended up being called, and the site was producing slightly broken HTML. The client filed a support ticket for us to see if we couldn’t figure out the problem.
This sort of issue can be challenging to diagnose because the problem may not point you to a jQuery code error. Can you say, “aggravating?”
Below are screenshots of how the errors were presenting.
The before screenshot
The after screenshot
The challenge with solving a problem like this is that the error didn’t present itself as a javascript problem, so we got creative in order to isolate the problem, reproduce it, and then fix it. It turns out that the site was running a plugin with an old version of jQuery hardcoded in. The issue was revealing itself in the “before screenshot” because WordPress was confused about which jQuery version to use: the header version or the footer version.
We’ll go into how to solve this problem in a post next week.
Leave a Reply