JQuery is not working in wordpress – Solution

Since WordPress version 2.x, jQuery is a build-in Javascript library, explicitly include the jQuery library into WordPress is not necessary.

Problem

The jQuery is not working in WordPress plug-in writing? When you try to test a simple jQuery effect like following

$(document).ready(function(){
  alert('test');
});

It’s just not working, no alert message box pop up. The same script is working as expected in single HTML page. What’s the heck? Is there any interoperability issues between jQuery and WordPress?

Solution

In WordPress, the$() syntax is always used by other scripting library, and causing the conflict issue and fail to call the jQuery function. You should use jQuery() instead…

jQuery(document).ready(function(){
  alert('test');
});

Alternatively, you can use noConflict()

$j=jQuery.noConflict();
 
// Use jQuery via $j(...)
$j(document).ready(function(){
  alert('test');
});

P.S jQuery.noConflict();http://wordpress.org/support/topic/141394

Never use jQuery handy function $() in WordPress plugin. You have to use jQuery() or jQuery.noConflict() to work between jQuery and WordPress.

Tags :

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

  • Pingback: watch free movies online()

  • Pingback: watch free movies online()

  • Pingback: increase leptin()

  • Pingback: Blue Coaster33()

  • Nguyen Huy Hoang

    Thank you very much. It’s very usefull for me. Thank you thank you :))

  • http://www.mastguru.com Sachin

    Thanks a lot my fried, I am working with social engine, which is having mootools in it, I wanted to add jquery, your this noconflict solution worked for me like a magic. thanks a lot again, and pls keep posting

  • http://www.konamito.es Konamito

    Thank you! I had many problems with “$” and I found the solution here ;)

  • Skweekah

    You can also use jQuery(function ($)

    That way, you wont get Property ‘$’ of object is not a function errors.

    • http://www.marcopanichi.com Marco Panichi

      Yes, it is the best way!

  • sagar

    <link rel="stylesheet" type="text/css" href="css/contentslider.css” />

    .contentdiv{display: none;}

    featuredcontentslider.init({
    id: “slider1″, //id of main slider DIV
    contentsource: [“inline”, “”], //Valid values: [“inline”, “”] or [“ajax”, “path_to_file”]
    toc: “#increment”, //Valid values: “#increment”, “markup”, [“label1″, “label2″, etc]
    nextprev: [“Previous”, “Next”], //labels for “prev” and “next” links. Set to “” to hide.
    revealtype: “click”, //Behavior of pagination links to reveal the slides: “click” or “mouseover”
    enablefade: [true, 0.14], //[true/false, fadedegree]
    autorotate: [true, 6000], //[true/false, pausetime]
    onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
    //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
    //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
    }
    })

    I am using content slider but when i am clicking on menu field slider expanding out of width

  • http://blackhut.co.za Samantha

    Thank you so much! By the way, the input names and fields are the wrong way around on this comment form.

  • Pingback: "Conflict" with jQuery (or its plugins)? | question code()

  • Peet

    Thanks!

    You r my hero!

  • http://www.teqon.com Richard

    WOW!
    I’m new to WordPress and this was getting on my nerves… because I wanted to go fast… Tnx man!

  • J Plus Plus

    Life Saver! Thank You So Much!
    Keep on posting Quality Post Like This!

    You’re The Man!!!

  • http://AmpWebDesign Alex Durston

    ‘Just another’ THANK YOU!! life saver!

  • http://www.zindagispice.com Praveen

    Saved my life too. I taught i won’t be able to find solution to this jquery problem in google search. But i luckily found your website. Generally i wont take time to like a page but this time i took time to like this page.

  • http://vytcdc.com Vijaya Narayanasamy

    Very informative site.helped me a lot,to sort out my jquery plugin issues in my site.
    Thx a lot.Keep it up.

  • http://dbriers.com/ Demarcus Briers

    Thanks a lot Mkyong. I was baffled when my jquery navigation wouldn’t work in WordPress but your solution solved this issue!

  • http://marshmalo.com/ Marshmalo

    very informative i got the solution of my problem, thanks.

  • SF

    mkyong, you saved my day. Thanks a ton for the great info!

  • swathi

    Browser Compatability issue in java jsp
    1.Scrollbar is displaying in Internet Explorer but it is not displaying in Mozilla.It is displaying in Mozilla only when the text entered exceeds the size of the Scrollbar

    Pls provide a solution

  • http://topherknowles.wordpress.com Chris Knowles

    Many thanks for this, was tearing my hair out trying to discover why my perfectly fine standalone script wouldn’t work in WordPress!

    • http://www.OrcSports.com/ Brett

      Same here! Thank you much!

  • http://www.asdw.com Arthur

    After hours, headache and etc, i found the solution here, thank you very much!

  • Raaghav

    simply replace

    $(document).ready(function() {
    $(“a.watchvideo”).fancybox({
    ‘overlayShow': false,
    ‘frameWidth’ : 480,
    ‘frameHeight’ : 400
    });
    });

    with

    function pageLoad(sender, args)
    {
    if(args.get_isPartialLoad())
    {
    $(“a.watchvideo”).fancybox({
    ‘overlayShow': false,
    ‘frameWidth’ : 480,
    ‘frameHeight’ : 400
    });

    }
    }

    It works fine :)

    • Raaghav

      simply replace

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

      with

      function pageLoad(sender, args)
      {
      if(args.get_isPartialLoad())
      {
      ….
      ….

      }
      }

  • murat

    hi. is there anybody for explanin how will ? do that. becasuse ? dont know what will ? do exatly. if you help me ? ll pride for you. thnx

  • Pingback: Jquery loading issue in wordpress plugin | Chris Chen's Mobile Base()

  • http://www.motif.tv Luke Elwell

    Saved my life , Thanks

  • http://www.gladsys.in George Mathew

    Thank you mkyong,
    Your post, helped a lot of my time

  • http://infinitegallery312.com infinite gallery 421

    letssaycprox

  • dominornovus

    Thank you, thank you, thank you! Good grief, I can’t believe that after countless hours of debugging, this jQuery/WordPress conflict was the root of my issue.

    Great work, Mkyong. Appreciated!

  • http://sleeperwire.com Brant

    Thanks a lot – had not used jQuery with WordPress before and I was getting frustrated.

  • http://www.stevenwaters.com Steven

    My jQuery isn’t working. I’m using .noConflict(), everything is loading in the correct order, and I’m able to click to my JS file from viewing the source for my website. I would provide a link but it’s on my local machine. Any suggestions?

    Also, I have it in a folder called js which is in the folder for my theme. It seems like it should be in the folder for my theme but maybe i’m mistaken?

  • Ramesh Viswakarma

    Thanks a lot dude… I came out from problem. :)

  • Eddie

    Thanks so much for that! This was driving me crazy!!!

    Big lightbulb just turned on. Invaluable.

    • http://www.mkyong.com mkyong

      Good to know it’s worked to you.

  • http://www.imicreation.com vipin

    Thanks alot..

  • http://trashnet.de/youloop/ trash

    problem: it seems like alot of plugins used $ in their source code (e.g. sexy combo boxes). Is there any way to make those plugins work without changing the plugins source code?

  • http://rocknrola.de Uwe

    HI,

    your explanation is as close as a solution to my problem can be. That’s why I’m posting here.

    My js code already uses the “jQuery()” call. The problem is that I want to use another js script (farbtastic) in conjunction with WordPress’ internal jQuery lib. Inside the farbtastic, $ is used and I get a ‘$ is undefined’ error though farbtastic is called from within ‘jquery(Document).ready(function($){…’.

    The scripts (my “colorpicker.js” and “farbtastic.js”)are included with “wp_enqueue_script()”.

    The code works flawlessly when farbtastic.js and another instance of jQuery is included at “wp_head()”.

    If you are interested in the problem, you may have a look at the website.

    Thanks!!

  • http://slicedwebdesigns.com.au brant

    You’re a lifesaver. This worked a charm!!

    • http://www.dreamsiteweb.com andres

      I think the same, thanks mkyong!

  • padmanaban.jv

    hi… thanks for info.. i had the same problem. now it has cleared. but still one more problem. it takes too time to load in ie8. pls could any one help me. i ll post the code.

    $j=jQuery.noConflict();
    $j(document).ready(function() {
    $j(‘input[type=”text”]’).addClass(“idleField”);
    $j(‘input[type=”text”]’).focus(function() {
    $j(this).removeClass(“idleField”).addClass(“focusField”);
    if (this.value == this.defaultValue){
    this.value = ”;
    }
    if(this.value != this.defaultValue){
    this.select();
    }
    });
    $j(‘input[type=”text”]’).blur(function() {
    $j(this).removeClass(“focusField”).addClass(“idleField”);
    if($.trim(this.value == ”)){
    this.value = (this.defaultValue ? this.defaultValue : ”);
    }
    });
    });

  • http://www.madisonwickham.com Madison Wickham

    Huge help! This was driving me crazy. Thanks a lot

  • http://www.getupandrunning.net Mark

    Thanks for the heads up – had me confused for a bit. They really should change that since jQuery is fast becoming the defacto standard for js frameworks.

  • http://www.techbusy.org/ abhi

    Good to see this. But jquery at front end is different from backend.

  • http://jangedoo.co.cc wordpress

    thanks for the info. I am having problem with wordpress theme and it cant display sidebar and my tweets. it says “jQuery is disabled and this widget needs it” how do i fix it? please help

  • John

    Thanks for this helpful post. I’m having some issues with jQuery on my site. Basically, I can’t get jScrollPane (custom scrollbars) to work as it’s not recognizing WordPress’ built-in jQuery library. Do you think you can take a look and see where I went wrong? I’m thinking I need to use noConflict() but I’m not entirely sure. I would really appreciate some help! Here is the specific page: Page

  • http://www.greatwildoutdoors.com/ Justin

    Thanks! My jquery works now. Will this work until another plugin uses $j = jQuery.noConflict() and assigns $j? Also, any idea how to include a newer version of jquery? It looks like the default version with my WP is kind of old.

  • http://limetouch.com Darran

    Thank you for shedding some light on this. I was wondering why a basic line like alert($(“contact_form”)); was giving me an “Object not supported” error. Strangely it was only having this problem in IE.

    • mkyong

      IE and Mozilla browser implementation is very different, may be you can give me full example here or by email, so that i can dig it in detail

      • http://dollarstoreproduct.com/SmartPriceBreadedChickenandMeatballs.html mario b

        I’m losing my mind. Building a site for client and jquery works well in the builder (yahoo site builder) but when I publish it, nothing happens. I found the code from http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm
        downloaded into the site folder, embeded the code is head of page, and everything was great until published.

        Anyone please help.
        Mario

        • http://www.mkyong.com mkyong

          Mind to provide the URL which jQuery is not working?

          • http://www.dollarstoreproduct.com mario

            Hi Mkyong, I figured it out but thank you. My jquery was not filed into the root directory therefore working on ite builder but not on the web. As soon as the file was placed in the root, viola. Take care.
            Mario