How to Create Your Very Own “Archive Navigator”

Last week I received an email from fellow reader Jaap asking if I could provide a link to a plugin that would implement something like my very cool Archive Navigator you see to the right.

I did some searching and found a jQuery plugin that is capable of the same effect called Coda-Slider. The reason this plugin is called 'Coda-Slider', is because this effect was made popular on Panic's product site for their web development software called Coda.

If you're looking for a quick solution to pull this off, head on over to Niall Doherty's blog (the author of the Coda-Slider plugin) and download it. There's enough documentation there to pull off the effect in a matter of minutes if you know what you're doing.

But if you're looking to improve on your web developing skills, I'll show you how to pull this off from scratch and customize it for WordPress using just the jQuery library.

Step 1: Building the Navigator

First, we're going to build out the elements needed for the Navigator. Open up your favorite text editor and create a couple of divs which will nest like this:

With CSS, we will try to achieve a layout like the following diagram:

Here's some sample CSS code that will go along with the HTML above:

Since the .crop div is a parent div of the other divs, specifying fixed dimensions as well as assigning hidden to the overflow attribute will effectively crop out anything not inside its dimensions. Although this example only has three divs, you can create as many as you want as long as you make the .widearea div wide enough.

Next, we'll need to add some controllers available to the user so that they can interact with this. For simplicity's sake, let's add three buttons:

Now that we've built out the HTML, we will start getting into the fun stuff.

Effects with jQuery

The first thing that needs to happen before we can start writing javascript for the jQuery library is to reference it. I recommend downloading it and referencing it off your own host rather than referencing it elsewhere.

Once you've dropped the library into your host, add a reference to it in your html like so:

Next, create a new js file with your text editor. This will hold all the custom javascript we will write. Let's take a step back and try and figure out what our objectives are before we start writing code:

1. Add a click event handler to our buttons
2. Create one (or more) functions which will produce the sliding effect

So for the first objective, creating a click event handler (also known as onClick) is real simple using jQuery:

Hopefully it's intuitive enough that you clued in that to create the other click event handlers for the other two buttons, you just had to copy and paste that line of code and replace buttonone with buttontwo or buttonthree. To explain this a little better: we are targeting the button with id buttonone (as done with $("#buttonone")) and then assigning a click event handler which will call a function.

Next, we will create the functions inside these click event handlers which will "scroll" the .widearea div horizontally:

In our function, we are instructing the .widearea div to animate to margin-left (note how jQuery's syntax is a little different from CSS) of 0. If you got this set up, you'll notice clicking on the button doesn't do anything, that's because by default, we are already seeing divone so there's no reason to move the .widearea div. Let's set it up for buttontwo:

If you add this in and click on buttontwo, the .widearea div should move 300px to the left so that #divtwo is in view. If you're wondering what the "500" is for, it specifies how long the animation should last in milliseconds.

Putting it all together now...

Eventually, after coding everything up, you'd end up with something like this:

If you want, you can copy and paste the above into an html file, stick it in a directory with version 1.2.3 of the jQuery library (the latest stable version as of this post) and run it for a quick demo. It functions the exact same as my archive navigator.

Now, you'll notice something new in the javascript. There's this $(document).ready(function(){ wrapping it all and it ensures that no javascript gets run until the page is fully loaded. It prevents any javascript errors getting thrown because if you didn't have this and this javascript gets executed before the button or div involved is loaded, it wouldn't work.

Customizing it for WordPress

If you've ever created or modified a WordPress theme before, you might have come across the template tags. You can use these inside the divs of .widearea to list categories, tags, and more. Here are a few examples:

• Tag cloud:
  <?php wp_tag_cloud(''); ?>
• Categories listing:
  <?php wp_list_categories('arguments'); ?>
• Last five posts:
  <?php query_posts('showposts=5');
          while (have_posts()) : the_post(); ?>
                  <li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
  <?php endwhile; ?>

Still with me?

I tried to make this mini-tutorial as newbie friendly as possible but there are some advanced topics in here that might have gone over your head. If you have any questions, feel free to ask through the comments as I'm sure I might have not explained something very well or left out something.

And if you're a seasoned programmer, I know some of this stuff is bad practice (I realize that the javascript is anti-OO), but I tried to make it accessible as possible.