Jquery is most powerful javascript framework and which is used widely. WordPress is most powerful and famous cms in the world. When you are using the jquery in wordpress that time you need to keep in mind some issues. WordPress itself uses the jquery in there framework. But when we tries to add the different versions of jquery and there plugins, there was issue or conflict with jquery. Sometimes I saw issue with some plugins due to different versions of jquery. I shown in this tutorial, how to solve the wordpress and jquery conflicts easily.

wordpress and jquery conflicts – How to solve that

wordpress and jquery conflicts

wordpress and jquery conflicts

Many people written the jquery wrapper around the jquery. They written in different style but when some jquery developers written or used same function name or same methods then jquery conflicts is happening.

WordPress itself uses the jquery for custom purpose. So you dont need to add the jquery script again in to wordpress. you just need to put following code in your wordpress theme for adding the jquery in your theme.


<!--?php wp_enqueue_script("jquery"); ?-->

Just put above lines in your header.php file for adding the jquery into your wordpress theme.

For removing the conflicts when you are using the jquery functions. just use following noconflict code in that.


 $.noConflict();
 // Code that uses other library's $ can follow here.


This technique is especially effective in conjunction with the .ready() method’s ability to alias the jQuery object, as within callback passed to .ready() we can use $ if we wish without fear of conflicts later:

<script type="text/javascript">// <![CDATA[
 $.noConflict();
 jQuery(document).ready(function($) {
 // Code that uses jQuery's $ can follow here.
 });
 // Code that uses other library's $ can follow here.
// ]]></script>

Following is the some example for remove the conflicts from jquery with wordpress.

Just use the jquery multiple times for each jqeury plugins. That is the easiest way to solve the jquery conflicts.

But if you are having some knowledge of jquery then use the following code for remove the conflict.

var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

For many purpose we use the jquery in wordpress. Mainly jquery is used for sliders and menu and gallery.
For menu or slideshow use jquery in following fashion.

Solution code is Hidden! It's Visible for Users who Liked/Shared This article on Facebook or Twitter or Google+. Like or Tweet this article to reveal the content.

If you still facing issue with jquery then please write to me on support@wordpressapi.com.

Here are some useful resources and links about Jquery and wordpress.

100+ jquery and CSS techniques and Tips and tutorials
jquery tips for wordpress theme developers
Fadein and Fadeout effect through javascript
minimize, restore, maximize and hide functionality with javascript without using jquery
Complete Javascript form Validation now easy ( Checkbox, Websites, Email, Maxlength)

Written by WPAPI

My name is Purab Kharat, Here is my Personal Blog: digcms.com. Work as an Senior Technical Lead at Smartsourcing Global Pvt Ltd in Princeton, NJ, USA. I contributor of many wordpress plugins and Drupal Modules. I am core developer of Drupal. Connect to purab on LinkedIn or Follow @purab on Twitter or Follow me on Google+ or Write Mail to purabdk@gmail.com or Chat with me on Skype : purabdk

This article has 10 comments

  1. Juan Reply

    HI,

    Do you think you can help me. I have a wordpress site with several plugins and when I try to add the google adsense code to the home page, one of the plugins (social network tab) disappears when I insert the code on the widget sidebar. I believe there is a javascript conflict, but I don’t see the way to fix it.

    I hope you can help me with that.

    Thanks

  2. Jeff Reply

    Hello,

    I tried your no conflict script but I can’t seem to get it to work. I also tried emailing you but my email got kicked back. Any help would be greatly appreciated. I have an instagram widget that’s messing up my flex slider and I’ve been trying for days to get them to play nice but so far no luck. I’d rather not post the proofing site here is there any way you can help?

    Thanks in advance
    -Jeff

  3. Travis Reply

    Thanks in huge part to 12 hours of banging my head against the wall and the info you’ve got here I’ve resolved a jQuery conflict between the image slider and menu on my WP site. Turns out the way the slider was calling jQuery was not valid…

    Here’s the offending line of code…
    $(document).ready(function(){

    This is the fix for that same line of code…
    jQuery(document).ready(function($){

    I’m guessing the code wasn’t working because the variable ‘$’ was undefined. By making the changes that I did, creating ‘$’ as a function to call jQuery, the issue was fixed.

    Thanks so much for writing this post and making your expertise available for all of us newbs to jQuery!

    Travis

  4. puneet Reply

    hey is there any plugin that I can include in my wordpress theme to remove the conflicting jquery’s (for mobile menu) ?

  5. pankaj Reply

    great post..!!
    I am still having trouble .. Here is the culprit code..

    <script type="text/javascript" language="javascript" src="/js/jquery.carouFredSel-6.2.0-packed.js”>

    $(function() {
    $(‘#foo2′).carouFredSel({
    prev: ‘#prev2′,
    next: ‘#next2′,
    auto: false,
    items: 4
    });
    });

    I tried what you suggested…

    <script type="text/javascript" language="javascript" src="/js/jquery.carouFredSel-6.2.0-packed.js”>

    $.noConflict();
    jQuery(document).ready(function($) {
    $(‘#foo2′).carouFredSel({
    prev: ‘#prev2′,
    next: ‘#next2′,
    auto: false,
    items: 4
    });
    });

    but no luck , Could you please help me with this ..

    Really appreciate your help..!!

    Thanks,
    Pankaj

  6. pankaj Reply

    Jquery mega menu wont hover due to this if i remove first line it works but slider stops working .. Please help.

    script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”>
    <script type="text/javascript" language="javascript" src="/js/jquery.carouFredSel-6.2.0-packed.js”>

    $.noConflict();
    jQuery(document).ready(function($) {
    $(‘#foo2′).carouFredSel({
    prev: ‘#prev2′,
    next: ‘#next2′,
    auto: false,
    items: 4
    });
    });
    script closed

    • WPAPI Reply

      what error your are getting. Use firebug script panel. first enable it and use debug checkpoint. you will be able to find the error.

Leave a Comment

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>