Over the past couple of months I've been playing more and more with jQuery - it's a lightweight bunch of javascripts that enable you to do "funky stuff". One of my core businesses is selling extremely modified wordpress templates - with some of the modifications powered by script.aculo.us. Obviously I wanted to change from script.aculo.us to jQuery as jQuery is, in my opinion, better.

Since Worpdress 2.1 (I believe), script.aculo.us has been deprecated in favour of jQuery, so it made sense for me to also deprecate use of it in my business…and therein lay the problem.

Wordpress are using an older version of jQuery (that's no big deal), but they have also somehow obfuscated it, and made it so that normal commands won't work. As an example, this piece of code would hide a div with an id="readmore";

$("#readmore").hide();

Easy as 123! I tried it using Wordpress' own version of jQuery, referenced by direct URL in the template header. Made sure the URL was correct, and then reloaded the page. No good! The div wouldn't disappear.

Then I uploaded a brand new unobfuscated version of jQuery, and changed the reference in the template. Reloaded the page. Worked perfectly! The div disappeared as required. But I don't want to have my customers keep searching for the latest jQuery file, then uploading it and so on - it'll cause more support headaches for me. I want to use the one supplied with Wordpress.

After HOURS of searching, I finally came up with the following piece of code;

wp_enqueue_script('jquery');

which apparently loads in the required jQuery,ready for use. I reloaded the page and…nothing! Doesn't work.

After more searching, I find that the enqueue piece of code has to be called BEFORE the wp_head. Doh! OK, I swap the code about and try again. Guess what. You're right Nothing.

By this time, I'm kinda getting bored with it, so I decided to run a search and replace on all the wordpress files to see exactly how it works (jQuery is used fairly extensively in the Admin section of Wordpress). After some digging, it turns out that to use the jQuery that comes loaded with Wordpress, you have to make code like this;

jQuery("#readmore").hide();

You can see the difference - a normal site would use a $, Wordpress uses the word jQuery. So…

After all the trouble I went through, I want to make it easy for anyone else who is struggling with jQuery and Wordpress…

Step 1: Load the jQuery file

Add the following code into the header.php of your theme BEFORE wp_head is called;

wp_enqueue_script('jquery');

Step 2: Writing the Code

Make sure to use the word jQuery instead of the usual $ sign.

Thoughts

What a fscking pain in the arse. What should have taken 10 minutes ended up taking over 3 hours. I shake my fist at you, Wordpress Developers HOwever, now that it is working, it is much smoother than the oldskool scriptaculous. Rock on jQuery.