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.

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
45 Comment threads
9 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
49 Comment authors
stirlingDPLisaGuibsonNguyen Huy HoangSachin Recent comment authors
newest oldest most voted
Konamito
Guest
Konamito

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

Guibson
Guest
Guibson

Thanks, man!!

Darran
Guest
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.

Justin
Guest
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.

John
Guest
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

wordpress
Guest
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

abhi
Guest
abhi

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

Mark
Guest
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.

Madison Wickham
Guest
Madison Wickham

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

padmanaban.jv
Guest
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 : ”); } }); });

brant
Guest
brant

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

Uwe
Guest
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… Read more »

trash
Guest
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?

vipin
Guest
vipin

Thanks alot..

Eddie
Guest
Eddie

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

Big lightbulb just turned on. Invaluable.

Ramesh Viswakarma
Guest
Ramesh Viswakarma

Thanks a lot dude… I came out from problem. 🙂

Steven
Guest
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?

Brant
Guest
Brant

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

dominornovus
Guest
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!

infinite gallery 421
Guest
infinite gallery 421

letssaycprox

George Mathew
Guest
George Mathew

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

Luke Elwell
Guest
Luke Elwell

Saved my life , Thanks

trackback
Jquery loading issue in wordpress plugin | Chris Chen's Mobile Base

[…] Solution found in Mkyong […]

murat
Guest
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

Raaghav
Guest
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 🙂

Arthur
Guest
Arthur

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

Chris Knowles
Guest
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!

swathi
Guest
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

SF
Guest
SF

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

Marshmalo
Guest
Marshmalo

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