Why am I getting “jQuery is not defined” Error in WordPress?

It sounds like your script is being loaded before jQuery, a couple of things will help you fix this:

First, you’ll want jQuery to recognize the $ shortcut so open up your .js file. I’m naming mine main.js and this bit of code:

jQuery(document).ready(function($){
   $('#hover-bullet1').mouseover(function() {
     $('#bullet-details1').removeClass('pretty-hide');
     $('#bullet-details1').addClass('pretty-hover');
   });
});

Note: Look at the first line closely, you want the to include the $ in the function.


Next, load in your file AFTER jQuery has finished loading, here’s how:

Open header.php from your theme folder.

Search for wp_head();

Add your script tag AFTER the php close tag that looks like this: ?>

...
   wp_head();
?>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/main.js"></script>

Hope that helps!

Back to Blog