It’s been a while since I actually encountered this particular nugget of advice1, but I thought I’d go ahead and make a quick post out of it anyway.
This is the kind of totally random and arbitrary development structure Wordpress has adopted that doesn’t really seem to ever be documented anywhere. If you don’t already know this kind of thing, you could very well be in store for major development and debugging headaches.
Anyway, here we go… If you’re using the built-in jQuery Javascript library that’s included in Wordpress since version 2.2, don’t use the handy-dandy $() function. In Wordpress, $() is reserved for the Prototype library, which is also bundled2.
Instead, for interoperability, be sure to use jQuery() instead, which should accomplish the same thing.
A bad example:
var username = $('#username').val();
If Prototype were to be loaded on the page this snippet of JS is running on, it would throw an error, since it uses a different pattern for selecting DOM elements.
A good example:
var username = jQuery('#username').val();
This line should work on any page, regardless of library conflicts. It’s a couple extra characters to type, but in the end it’s really for the best - you get portability, and it’s more self-explanatory which library is being used when you go back to look at this code in 6 months.
I’m planning another, similar, Javascript-related post as soon as I get a few more minutes to make it coherent. Stay tuned, and happy coding!
13 Comments so far
iPaul Pro, on June 13, 2008 at 4:50am, said:
Wow! Thank you so much. I am just diving into javascript and was beginning to lose hope. How is this not widely documented? I will definitely be blogging about it when my site is done.
Thanks!!
Edit Comment
Tom Ransom, on July 18, 2008 at 8:41am, said:
Thanks very much for this post. It just saved my sanity. Please consider writing an article for the WP Codex.
Edit Comment
AlainS, on August 9, 2008 at 10:02am, said:
Tnx 10000000000000000x!!! This post is a big time saver!
Edit Comment
Carlos Santa Cruz, on September 12, 2008 at 1:06pm, said:
You save my day, I spend some time looking for this solution.
Thank You,
Carlos
Edit Comment
Alex Kessaris, on September 19, 2008 at 4:53am, said:
Hello, this is definitely the right advice. I also stumbled across it on the internet at random. It’s definitely true that people are spending more time coding the stuff than documenting it, but that’s a well-known struggle.
The next problem we’ll all likely encounter is getting jQuery plugins to work with our WordPress installation of jQuery.
According to various sources (I haven’t seen it in the docs yet..).. Using a plugin file is as easy as including its js file after the main jquery script initialization (ie in the head of your document)..
Unfortunately I have tried doing this with the cycle plugin (http://malsup.com/jquery/cycle/) and nothing. Although jQuery is alive and well, the cycle plugin is not being registered.
Any help at all would be well appreciated!
Edit Comment
Ian, on November 23, 2008 at 1:41pm, said:
This worked great for me, thanks for the advice. There’s a few other methods I couldn’t seem to get to work.
Edit Comment
Chris, on January 4, 2009 at 4:03am, said:
Man, I was about to pull my damn hair out until I googled your site. Good work, this should be an article in the WP Documentation.
Edit Comment
Richard D. Worth, on January 23, 2009 at 8:38am, said:
See also
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
for a couple other options.
Edit Comment
Anonymous, on March 6, 2009 at 9:29am, said:
Thanks!!!
Edit Comment
jQuery in WordPress | Jason Ashdown’s Blog of Wonders, on March 16, 2009 at 12:44pm, said:
…t my jQuery code work in the admin area of WordPress??
After some probing on Google, the answer was revealed to me. Basically WordPress doesn
Edit Comment
Troubleshooting jQuery in WordPress Themes | Andrew Marconi, on May 29, 2009 at 12:29am, said:
…>). The bad news is that it breaks support for the $ shortcut.
I came across an simple solution via Chris Mellon:
Instead, for interoperability, be sure to use jQuery() instead, which should accomplish the same …
Edit Comment
Anthony Cole, on June 18, 2009 at 2:11pm, said:
I just found this tutorial on Google and wanted to let you know you fail miserably at life and everything else.
Edit Comment
Chris Meller, on June 19, 2009 at 10:37am, said:
Little jealous? :)
Edit Comment