Howto add jQuery functionality on your Wordpress theme

Wordpress now include jQuery for Javasript library. Drupal has this library started from version 5.
In this short tutorial I will show you an example how to add jQuery functionality on your Wordpress theme. The possibilities are endless, the limit is only on your creativity ;).

We take a “Archieves” on sidebar for example. We know that sometimes with numerous posts, archive list will be long. Sometimes this is annoying. You want to just display the Archieves title, when someone click, the content will be expanded.

Let’s begin:

1. Open your theme file, especially your header theme file (header.php) then add this syntax to load jQuery library:
   <script type="text/javascript" src="<?php bloginfo('siteurl'); ?>/wp-includes/js/jquery/jquery.js"></script>
2. Then add this code:
   <script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#archives ul').css('display','none');
jQuery('#archives h2').css('text-decoration','underline');
jQuery('#archives h2').click(function() {
jQuery('#archives ul').fadeIn('slow');
});
});
</script>

See at point 2, jQuery(document).ready(function() {}); is a function to check if the whole page is loaded, if it’s fully loaded, the following script will be executed.

Set all list hidden: jQuery('#archives ul').css('display','none');
Add some underline format on Archieve title: jQuery('#archives h2').css('text-decoration','underline');

When title is clicked, the list will be displayed with fade in effect

jQuery('#archives h2').click(function() {
jQuery('#archives ul').fadeIn('slow');
});

Try it!