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, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

Leave a Reply

avatar
newest oldest most voted
Guibson
Guest
Guibson

Thanks, man!!

Nguyen Huy Hoang
Guest
Nguyen Huy Hoang

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

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

Konamito
Guest
Konamito

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

Skweekah
Guest
Skweekah

You can also use jQuery(function ($)

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

Marco Panichi
Guest
Marco Panichi

Yes, it is the best way!

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

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

trackback
"Conflict" with jQuery (or its plugins)? | question code

[…] is the solution here but I haven’t tested this a lot also. My issue here is I’ve used jQuery in another […]

Peet
Guest
Peet

Thanks!

You r my hero!

Richard
Guest
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
Guest
J Plus Plus

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

You’re The Man!!!

Alex Durston
Guest
Alex Durston

‘Just another’ THANK YOU!! life saver!

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

Vijaya Narayanasamy
Guest
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.

Demarcus Briers
Guest
Demarcus Briers

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

Marshmalo
Guest
Marshmalo

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

SF
Guest
SF

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

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

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!

Brett
Guest
Brett

Same here! Thank you much!

Arthur
Guest
Arthur

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

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 :)
Raaghav
Guest
Raaghav

simply replace

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

with

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

}
}

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

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

[…] Solution found in Mkyong […]

Luke Elwell
Guest
Luke Elwell

Saved my life , Thanks

George Mathew
Guest
George Mathew

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

infinite gallery 421
Guest
infinite gallery 421

letssaycprox

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!

Brant
Guest
Brant

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

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?

Ramesh Viswakarma
Guest
Ramesh Viswakarma

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