Adding jQuery to WordPress

Each WordPress installation comes with jQuery built-in as it uses the Javascript library in it’s dashboard area. Meaning that you don’t have to actually upload it to your server and link to it from the header.php file of your theme, instead you can add the following line of code inside the section to call it from within the WordPress install:

<?php wp_enqueue_script("jquery"); ?>

Add the above code before the wp_head function that should be included in the header of your theme. Then add any custom jQuery after the function, like in the following example:

<?php wp_enqueue_script("jquery"); ?>

<?php wp_head(); ?>

<script type="text/javascript">
$(document).ready(function(){
  $('.target').hide();
});
</script>

This will ensure that your custom jQuery is called after the core jQuery library. However if you are wanting to make your theme a 100% bulletproof it is worth switching jQuery into it’s ‘No Conflict’ mode to prevent it from clashing with any other libraries (Mootools, Prototype etc).

To do this you can replace the default ‘$’ shortcut with one that is unique to jQuery and will not clash with other libraries using the same shortcut, in the example below I’m going to replace ‘$’ with ‘$j’ using noConflict:

$j=jQuery.noConflict();

// Use jQuery via $j(...)
$j(document).ready(function(){
  $j('.target').hide();
});

Now your theme will be jQuery ready and bulletproof from any other libraries.

This entry was posted on Monday, July 12th, 2010 at 11:45 am and is filed under Wordpress, jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.