WordPress Hints & Tips: Using jQuery

Like I said, this post is just going over how to get jQuery working correctly inside a WordPress theme. First off let’s explain why it’s different to using jQuery normally.

What’s Different About WordPress’ jQuery?

Well simply put jQuery inside WordPress runs in what is called no conflict mode. This allows other Javascript libraries such as Prototype & Scriptaculous to work along side jQuery without causing conflicts. This means that the standard way of writing most jQuery commands won’t work as you’d expect it too as most Javascript libraries use the $ token as a reference to their core function/method.

What Can I Do About It?

There is actually a very simple solution. With jQuery automatically being initialized with ‘no conflict’ mode turned on we can just use the alternative syntax which looks as follows:

There you go. That simple bit of jQuery will turn all text inside elements with the class selector red. As you can see though instead of using the normal $ I’ve used jQuery instead. This will work at anytime, even when no conflict mode isn’t turned on, but as far as I’m aware it’s what should be used inside WordPress.

I’ve Already Written A Script Though…

I know what you are going to say. I did exactly the same thing before I realized about the whole no conflict thing. First though let’s explain to everyone else why your script has such a big problem. It’s actually pretty simple. If you weren’t aware of no conflict you’d have written your script to look something like:

As you now know this will probably not work due to the use of $. However if your script is longer than this one it will be a pain to go through changing all your $ to jQuery so there is a simple solution. Use this instead:

This code calls the DOM ready as normal, but passes the $ token through so all the code inside can use it without fear of conflicts with other Javascript libraries. It is an exceptionally handy feature that has saved me a lot of time & pain rewriting code.

One thing to understand is that the above works because of function scope. If you have parts in your script outside of the DOM ready then you will need to change them to use jQuery.

What Do You Mean? Function Scope?

Well simply put the $ reference to the jQuery core was passed into that function so it only exists within that function. Any other data, including those from other JS libraries, will have been overwritten by the jQuery core, but again it doesn’t matter because inside this function you only want access to the jQuery core. Function scope is/can be complicated, but I think that gives you the general idea of why that code works.

Hopefully this little hint/tip has helped you understand more about WordPress’ use of no conflict & how to get your jQuery code/scripts to work inside it without further problems. One thing to note is that no conflict does not effect jQuery plugins as they are written differently and generally always use jQuery anyway.

As always if you have any questions, let me know and I’ll try my best to answer them for you as quickly as possible.

HintsJavascriptjQueryTipsWordpress