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:
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:
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!
- Pointed out by rob1n in #wordpress, BTW. [↩]
- In all fairness, I suppose this makes sense. Prototype was added first. [↩]
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!!
Thanks very much for this post. It just saved my sanity. Please consider writing an article for the WP Codex.
Tnx 10000000000000000x!!! This post is a big time saver!
You save my day, I spend some time looking for this solution.
Thank You,
Carlos
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!
This worked great for me, thanks for the advice. There’s a few other methods I couldn’t seem to get to work.
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.
See also
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
for a couple other options.
Thanks!!!
…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
…>). 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 …
I just found this tutorial on Google and wanted to let you know you fail miserably at life and everything else.
Little jealous?