WordPress: Theme or Plugin not working as it should? Check for duplicate CSS or JS files

We all know how a typical WordPress installation works: you start with a cool Theme that suits your tastes, add a fair share of must-have Plugins such as Jetpack, Contact Form 7, the YOAST package to handle Analytics and SEO stuff and you think you're mostly done: you just need a blog, after all, keeping it as simple as you can.

Then you find out that you'd also like a newsletter and MailPoet gets added to the loop. And it won't be much time until you realize that you'd also like to throw some image galleries here and there, so you browse through the hundreds of sliders & carousels in the Plugin Repository until you find a good one. And what's better than BuddyPress to feed your community expectations? Or WooCommerce if you want to sell stuff? And why should you deprive your users of the chance to get your valuable Google Drive shared files by not installing a Download Manager of any sort?

Let's just face it: you don't pick WordPress to keep things simple: as a matter of fact, you want it to do complex stuff while keeping them under your control thanks its consistent, versatile and mostly modular framework interface. What's wrong with that? Nothing. Except when these plugins start to conflict with each other, or when they keep adding the same js or css common libraries (mostly being jQuery, Bootstrap, MooTools etc.) to your pages.

The issue

If you've stumbled upon this post, chances are that your WordPress Theme, and/or one of your WordPress plugins is not working as it used to do in the past: sometimes it's the responsive menu not working anymore (maybe on mobile browsers only), sometimes it's the responsiveness seems that seems to be gone. You tried to debug the issue by looking the javascript console and the css inspector, but you couldn't find nothing odd. You also tried to deactivate/uninstall a couple of recently added plugins, but to no use... the glitch is still there.

The solution

Surprisingly enough, nine times out of ten you're almost there: when a WordPress Theme is affected by UI glitches it didn't have when you installed it, the most common cause is related to a plugin adding a js or css resource conflicting with the stuff it already has. Open your page HTML source and look for the following:

• bootstrap.css
• bootstrap.min.css
• bootstrap.js
• bootstrap.min.js
• jquery-x.y.z.js
• jquery-x.y.z.min.js
• jquery-ui.js
• jquery-ui.min.js
• jquery-ui.css
• jquery-ui.min.css
• font-awesome.css
• font-awesome.min.css

... you got the point. Basically you have to inspect the html source code of your WordPress pages, looking for any duplicate .js and .css resource library, paying special attention to the most used/featured ones: bootstrap, jquery, jquery.ui, mootools, modernizr, font-awesome and such. If you find a dupe, you need to remove it. You can get an hint of which plugin is adding these files by looking to the id field of the relevant <link>  or <script>  html element. Most plugins will give you the option to not include these common libraries in your page: if they don't, just FTP to your WP installation and (temporarily) rename them, so you can see if they're the culprit in your scenario. If they are, well, you have the following options:

• Check if your WordPress theme gives you the option to disable the "offending" common libraries (most advanced themes actually do).
• Contact the author using that plugin's page in the WordPress Plugin Browser asking for an option to turn the offending common libraries off - and maybe go for option 3 or 4 until he does that: here's an example.
• Permanently rename the plugin's resource files (you'll need to do that after each release/update).
• Deactivate / Uninstall the plugin.

You can read here for a typical example of duplicate conflict involving the Sparkling Theme and the Download Manager plugin: two great pieces of code, both using Bootstrap: the solution there was to deactivate the Bootstrap library inclusion in the Download Manager settings page.

A more robust fix

Manually inspecting your HTML pages and single-handedly renaming/fixing the plugins is not something you should normally do: other than being hard and slow, you can't really trust error-prone procedures like these.  That's why I recently started working to a WordPress plugin that will automatically perform the following tasks:

• Check for duplicate js/css references in your WordPress pages (home, single-post, single-page, etc.).
• Inspect your theme and plugin chain to find who's loading the duplicate stuff (if any).
• Prompt the user the details of the analysis, so he can choose what to do.

Needless to say, it will be completely free. If you like the idea and would like to participate, feel free to contact me so I can add you to the upcoming project's source code repository.

Happy posting!

Print Friendly & PDF Download