Having issues with jQuery and WordPress?

Recently, I’ve worked on several sites where jQuery is needed for functions within the site – items like scrolling sections, expanding sections, rotating text – all kinds of neat and fun stuff. Typically, when you want to use javascript (or other) on your site, you put the script into the theme files and call it into your header. However, much to my delight, I found that WordPress already comes with the latest jQuery library within the depths of core files, and they even have a neat little function you can use to call it in when you need it: wp_enqueue_script().

Now, this is a juicy little tidbit of code. All you have to do is call in the jQuery library by calling this function into your header.php file, i.e. .

But that’s where my fun began. Stupid thing didn’t work!

It got to the point where I was a tad bit frustrated, and just did the old method: stuck the script in the theme and called it in myself. But it seemed so redundant (and probably ate up server resources in some way, because you’re calling it twice). Plus, it was just annoying me to not use something that was already there, waiting for me to take advantage of it.

After some trial and error, massive Google searches and many twists and turns, I found out how to whip that function into shape, and crush it under my bootheel like the dominatrix my husband wishes I could be. (Okay, not really. But it sounded good.) So here are my little tidbits for you today, and hopefully you won’t be trudging through the same much I was.

First, since WordPress has the capability of using all kinds of script libraries (::gasp:: yes! there are other libraries!), not just jQuery. So there’s a large possibility for the different frameworks to conflict if you’re using more than one (which you shouldn’t, but you know. “It happens,” as Forrest once said.) So to bypass this possibility of conflict, you need to write your scripts in one of two ways:

• write a variable to ensure you’re in jQuery “no conflict” mode. Place this at the top of your script/s:
  var $jnc = jQuery.noConflict();
  and replace all of the jQuery calls (i.e. the “$” at the beginning of your lines) with your variable. So, for example, $document.ready(function()); becomes $jnc(function());
• Even better? WordPress already comes equipped with “no conflict” mode. Why write your own variable, when it already comes pre-installed for you? use “jQuery” in place of “$” and you’re set.

However, even equipped with this knowledge, I was still having issues. For some reason, there were occasions where the library still wasn’t being called in. In one case, I thought it was because I’d placed the wp_enqueue_script('jquery'); call before the call to my wp_head(); function – but since PHP files are loaded before they are parsed, I didn’t understand why it mattered where I stuck the little booger. (But doing it worked, for some reason, so whatever.)

It was annoying how impertinent this call was being. It wasn’t reliable, which I didn’t like. “hit or miss” to see if it was working. But then, finally (queue the angelic choir, sunbeams from the heavens and all that) I found it – the Holy Grail of making it work. The functions.php file.

Oh, my torrid love affair with the WordPress functions.php file. I remember when we first met, I was terrified of you, sure I would destroy the planet with a single misplaced semicolon. But now I know better. You just look scary. In reality, you’re just a little puppy dog, waiting to be played with.

Here is the magic function: please use it responsibly.


function add_jQuery() {
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script( 'onLoad', WP_CONTENT_DIR . '/themes/MY THEME/js/onLoad.js', array( 'jquery' ) );
}
add_action('init', 'add_jQuery');


Of course, replace “MY THEME” with the name of the theme you are using. And also, of course, the line containing “MY THEME should only be used if you already have a file that loads a bunch of js. It’s not necessary, but adding this line just “tacks on” the WP jQuery stuff to your existing code, without actually having to edit said file. But yeah, that’s it. Pop that into your functions.php file, and you’re good to go.

Now, armed with this lovely bit o’ info, you should find your troubles utilizing jQuery within your WordPress themes to be a thing of the past.

May the force be with you.