Skip to content

Using jQuery in your WordPress theme

February 8, 2009

Just updated my theme on my wordpress powered blog. As jQuery is now part of wordpress, I figured I should get rid of the Mootools scripts I was using and rewrite them in jQuery. Nothing against mootools, but the integration is better now with jquery, and I am now more familiar with jQuery as I use it a lot in my mvc apps. Also it didn’t always play nice with other plugins.

Anyway, I ran into a few issues, and I thought I’d share them here in case anyone else ran into those as well.

How to put the javascript files in your template ? You could ofcourse hardcode them in your headers.php, but that’s not the right way to go. I used to have these references:

    <script src="<?php bloginfo(‘template_directory’); ?>/js/mootools.js" type="text/javascript"></script>
<script src="<?php bloginfo(‘template_directory’); ?>/js/eric.js" type="text/javascript"></script>   


As long as you use Mootool and not jQuery this works fine, but if you want to include jQuery you should use this to play along nicely with other plugins or scripts that use jQuery:

   1: <?php wp_enqueue_script('jquery'); ?> 
   2: <?php wp_enqueue_script('jquerycolor', '/wp-content/themes/greendale/js/jquery.color.packed.js', array('jquery'),'1.2.6'); ?> 
   3: <?php wp_enqueue_script('jquerylightbox', '/wp-content/themes/greendale/js/jquery.lightbox.packed.js',array('jquery'),'1.2.6'); ?> 
   4: <?php wp_enqueue_script('ericjs', '/wp-content/themes/greendale/js/eric-jquery.js',array('jquery'),'1.2.6'); ?>

The wp_enqueue_script command ensured everything is loaded in the right order. If you use the bloginfo command and insert the script yourself, chances are you end up loading your own script before jQuery is loaded ! Which ofcourse results in all sorts of weird errors. The eric-jquery is my own script, the lightbox stuff is for the excellent jQuery lightbox plugin. There are a few lightbox jQuery plugins, but I liked that one the best.

Something else you want to keep in mind. Do not use the $(“#archive_result”) jQuery selectors, but use jQuery(“#archive_result”). Something like this:

   1: jQuery(document).ready(function() {
   2:     jQuery("#recent_content").hide();
   3:     jQuery("#archive_content").hide();
   5:     jQuery("#recent_h3").click(function(event) {
   6:         jQuery("#recent_content").slideToggle();        
   7:         }
   8:     )
  10:     jQuery("#archive_h3").click(function(event) {
  11:         jQuery("#archive_content").slideToggle();        
  12:         }
  13:     )    
  14: });

jQuery-ui has some things I might like to add later, for now I just rewrote some of the simple sliding things on the sidebar and the archive page.

  1. March 28, 2009 8:11 pm

    Thank you so much. This would have taken me forever if it wasn’t for your tips.

  2. June 16, 2010 12:18 am

    thanks for sharing,,

  3. March 13, 2011 10:23 pm

    This would have taken me forever if it wasn’t for your tips.

Comments are closed.

%d bloggers like this: