Enhance your Blog Design with JQuery

Recently I visited a blog site where the sidebar was so neat and tidy it looked great. There was plenty in the sidebar but thanks to a bit of simple JavaScript the ‘busy-ness’ was contained well. It was using a simple show/hide but worked very effectively. I’ve also seen it in use with hiding a comment form out of the way until it’s needed.

JQuery

JQuery is a JavaScript library that simplies event handling, animation, Ajax interactions and much more. The WordPress admin uses JQuery to enhance a variety of sections - the show/hide tabs in the Write page, the lightbox for the media uploader. So it’s already built into Wordpress, all we need to do is call it from the front end and use it ourselves.

JQuery is stored at /wp-includes/js/jquery/jquery.js. To use this we need to load it into the header of our page. So we need to add the following line in our header.php theme file, ideally just before the wp_head() tag (thanks to Gary for pointing out the wp_enqueue_script() tag - will post on this soon!).

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

This will then load the JQuery library whenever someone loads your site.

Setup the Target

To target a particular section on your site you need a way to identify the trigger and the section to show or hide (we’ll call this the target). For this example we’ll target the Archives. The code from the Classic theme for outputting the Archives is

<li id="archives">< ?php _e('Archives:'); ?>
	<ul>
	 < ?php wp_get_archives('type=monthly'); ?>
	</ul>
 </li>

This will then give us an output of

<li id="archives">Archives:	<ul>
	 	<li><a href='http://www.yourdomain.com/?m=200810' title='October 2008'>October 2008</a></li>
	<li><a href='http://www.yourdomain.com/?m=200809' title='September 2008'>September 2008</a></li>
	<li><a href='http://www.yourdomain.com/?m=200808' title='August 2008'>August 2008</a></li>
	</ul>
 </li>

So here our trigger is the ID ‘archives’ and the target is the list within the ‘archives’ ID.

The JQuery

So to make this work we need to do the following steps with JQuery.

1. Hide the target on loading (we use JQuery rather than CSS for this so that if a visitor doesn’t have JavaScript enabled they’ll just get the fully expanded version instead).
2. When a user clicks the title ‘Archives’ it shows the target, ie. the list of Archives, if it’s not already displaying. If it’s already on display it hides the target.

So, to hide an element or several elements on a page on loading we use the hide() method. To target the correct element we can use a html tag name, ID or class name. In this case we’ll use the ID as it should be unique and won’t affect anything else on the page.

Before we can start we first need to surround our JQuery commands by a function that will load the commands when the page loads. So below the call to the JQuery file that we added above, we need to insert the following code

<script type="text/javascript">
jQuery(document).ready(function($) {
 	// this is where our commands will go
 });
 </script>

Then, to hide the archives on page load we insert the first command below, where the comment says to in the code above.

$('#archives ul').hide();

To break this down, we have

• $ - this is shorthand for jQuery. We could also write ‘jQuery’ instead, but we’ll use the shortcut.
• (’#archives ul’) - this tells jQuery what to target. Notice the code within the apostrophes is a standard CSS selector. jQuery supports up to CSS3 selectors.
• .hide(); - is the method we’re calling.

So, now we have the list within the Archives hidden. Next we want to show that the Archives are clickable. We could do this with a +/- icon before or after the heading Archives, or we could make the mouse become a hand when it hovers over it (the same way it changes when it hovers over a link). We’ve got two options with this. The first is to set it in the CSS, the second is to add it using jQuery. I would suggest to use the jQuery method, so that it doesn’t happen for your non JavaScript users, otherwise they may wonder why they’re clicking on a header that doesn’t do anything!

To do this we use the css() method to add in the code, and insert it after the previous command on a new line.

$('#archives').css("cursor","pointer");

Then we need the final command, to use the trigger to show and hide the list. To do this we’re using the click() and toggle() methods. First off we use the click() method to capture when our trigger has been clicked, then the toggle() method effectively toggles between show() and hide(), and will show if the target is hidden, or hide if the target is showing. We can achieve this with the following code

$('#archives').click(function() {
 	$('#archives ul').toggle();
 });

The Final Code

So to put all of this jQuery code together, we have the following code:

<script type="text/javascript">
jQuery(document).ready(function($) {
$('#archives ul').hide();
$('#archives').css("cursor","pointer");
$('#archives').click(function() {
$('#archives ul').toggle();
});
});
</script>

You can use this on anything on the web page, so you could have your categories, search box, archives, links and comment form hidden at first, and use a toggle to show and hide these when a specific target for each is clicked. The above code would need to be duplicated for each show/hide section you want on your page, however we can reduce the code down a bit for the first two commands by adding the selectors into a comma separated list, the same as how CSS can be coded eg.

$('#archives ul, #search form, #comments div').hide();

The show/hide/toggle methods are so useful in hiding off some aspects of your page so that the design can still be kept quite simple and non-overwhelming, yet you can still keep everything on the page that you want on it. Next week I’ll explain how we can improve on this to have a more graceful show and hide of the targets.