How to Fix a WordPress jQuery Conflict Problem

Posted on Updated on

Much of the fancy functionality of WordPress comes from JavaScript. Whenever you see an animated sliding gallery, special hover effects, or sliding panels, you’re seeing JavaScript in action. It is a client-side script which means that none of the processing is done by the server. Everything is interpreted by your browser at your end. While JavaScript is a powerful force on the Internet today, it is notorious for its various conflicts and it’s laborious debugging process. It is what is known as an “interpreted language” meaning that runtime errors are very common. In particular, one common error is related to the “$” sign. It can cause conflicts with other plug-ins especially with older ones. Here’s how to fix a WordPress jQuery conflict problem.

Identifying the Error

The first step is to identify that this is indeed the issue you’re facing. The first sign is that one of your plug-ins isn’t working. Either the slider animation is not playing or some other action on click is a bust. If you’re using the Chrome web browser, press Ctrl+Shift+C to bring up the developer tools panel on the bottom. Click the “Console” tab. This will show the pane where any uncaught JavaScript errors will be displayed. If there is a jQuery conflict, you should see something like the error message below:

jQuery Uncaught TypeError: Property '$' of object [object Window] is not a function

jQuery Error

This means that there is a jQuery conflict probably residing in one of your plug-ins. WordPress by default runs in no-conflict mode so it has to be something delivered by a third-party. If you press Ctrl+U on the webpage displaying the error, you will get a new tab displaying the source code. To find the offending JavaScript, search for the ‘$” sign. Chances are, you’ll find a block of code like the one shown here

Offending code

In the screenshot above, you can see that the script is using the “$” sign. If you’re lucky, the developer has left a comment in the HTML that will point you to the precise plug-in outputting the code. This makes our job easier. So let’s go fix it up.

Fixing the JavaScript Code

From your WordPress dashboard, head over to the plug-ins screen and locate the third-party add-on causing the problem. Click the “Edit” button just below it as seen here. This will take us to the page where we can modify the plug-in code generating the JavaScript.

Edit plugin

You have to search through the plug-in files on the right-hand side for the correct one that’s spitting out the code. Again, search for the “$” to make your life simple. Once you find it, you have to select the entire code minus the <script></script> tags and surround it with:

jQuery(document).ready(function($) { ... });

The first line of this code goes above the script and the last one goes below it. I made the changes to the sample code is shown in the screenshot below.

Wrap code

This might be a good time to take a backup just in case something goes wrong. Select all the code in the text box, copy it, and paste it into a neutral text editor like Notepad. This way if the plug-in malfunctions, you can just paste the whole thing back and reactivate it. But if you do it right, there won’t be any problems.

After saving the plug-in, reload your page and see if it works as intended. Once again, you can hit Ctrl+Shift+C to bring up the developer tools and in the console that particular error should have vanished as seen here:

Clean errors

This is a handy way to fix a WordPress jQuery conflict issue. Of course, the next time the plug-in author updates their code you may have to redo the changes. A longer-term solution might be to contact them in the WordPress forums and inform them of the conflict if they’re not already aware of it (and they should be). Most of the time you have to use this hack only for older plug-ins that are no longer updated.

10 Comments on “How to Fix a WordPress jQuery Conflict Problem”!

  • Hello Bhagwad,

    Great Post..! You save me

  • Thank you so much bro ! I was struggling with this error from last 3 days. Thank you so so much :)

  • Thank you SO MUCH for this article! You helped me resolve an issue that would have been disastrous for me. Much appreciate and thanks for the level of detail you included!

  • Thank you so much, Bhagwad, for taking the time to write this extremely helpful article!!! You have helped me resolve a problem which had me pulling my hair out for almost a WEEK!!!! Thanks again, you are awesome!!! :)

  • Thought i’ve found the solution to my problem, but it didn’t work for me

  • I must be missing something. I don’t see a difference between the Offending Code graphic and the Wrap code graphic.

  • Hi, this is if the dev has used a standard version of jQuery and not the WordPress version, what if you want to use the WordPress version (as is often advised), how do you use just the ‘$’ in that case (saves time!) ??

Leave a Reply

Your email address will not be published. Required fields are marked *