Spice Up Your Archives with a Timeline

I’ve always loved the following Timeline Archive as shown here. The code is provided here.

I use Headway but have no idea how to implement it so my archive looks much better than the current standard ones I can use.

- Stuart Wooster, StuartWooster.com

In today’s post, we’re going to take a look at how you can spice up your archive page using the timeline style Stuart has shared with us in the links above.

 

(Reading this in an RSS reader? Click here to see the video.)

While attempting to set this timeline up according to the tutorial above, I ran into a very odd problem. For whatever reason, the when the code queries my blog posts and pulls the dates for each, it’s saying they were all published in 1970. For that reason, I’ll instead show you how I’ve created the Archive page for my personal blog. It’s similar to Stuart’s link except it doesn’t take into account the number of days passed between posts.

The PHP Code

In your WordPress dashboard, go to Pages > Add New and create a page called Archives or whatever you want your archive page to be titled. Once it’s created, open up the Headway Visual Editor and go to the newly created page. You can go ahead and delete the content leaf that’s there. In its place, add an HTML/PHP leaf.

Once the leaf is on the page, click the pencil icon to edit it. Then paste in this code:

<table><span>2011</span><?php query_posts('year=2011&posts_per_page=-1'); ?><?php while (have_posts()) : the_post(); ?>               <tr>                  <td><?php the_date('j M', '<span>', '</span>'); ?></td>                  <td><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></td></tr>     <?php endwhile; ?></table>
<table><span>2010</span><?php query_posts('year=2010&posts_per_page=-1'); ?><?php while (have_posts()) : the_post(); ?>               <tr>                  <td><?php the_date('j M', '<span>', '</span>'); ?></td>                  <td><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></td></tr>     <?php endwhile; ?></table>

<table><span>2009</span><?php query_posts('year=2009&posts_per_page=-1'); ?><?php while (have_posts()) : the_post(); ?>               <tr>                  <td><?php the_date('j M', '<span>', '</span>'); ?></td>                  <td><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></td></tr>     <?php endwhile; ?></table>

In this case, you’ll notice that the years are manually set. Obviously, this isn’t an ideal solution, but since you would only have to update it once a year it’s not much of a hassle. For every year you’ve posted on your blog, you should copy and paste a new line at the bottom and replace both the years with the applicable year.

The CSS

You can paste this code in by going to Tools > Live CSS Editor in the top menu of the Headway Visual Editor. This code is exactly the code I use on my personal blog, so you’ll have to swap out the leaf number (91) with the number of the leaf you added to your archive page. If you’d like to style your archive page a different way, check out CSS for Beginners. A little bit of tweaking can go a long way!

div#leaf-91 div.leaf-top { display: none; margin-left: -3px; border-bottom: none; }div#leaf-91 table { margin-top: -8px; width: 400px; margin-bottom: 50px; float: left; font-size: 14px; margin-left: 20px; line-height: 1.5em;}div#leaf-91 table td.td-date { width: 50px; padding-right: 20px; text-align: right;}div#leaf-91 table td.td-title.view-all { font-family: sans-serif; padding-top: 10px !important; }div#leaf-91 table td.td-title, div#leaf-91 table td.td-date { font-size: 12px; padding-top: 0px; }
div#leaf-91 div.leaf-content a{ font-family: sans-serif; color: #99aa66; text-decoration: none; }div#leaf-91 div.leaf-content a:hover{ color: #555; border-bottom: thin solid #99aa66; padding-bottom: 1px;}div#leaf-91 span.td-year { font-size: 30px; float: left; }
span.arc-date { font-family: sans-serif; color: #bbb;} div#leaf-91 span { float: left; }

UPDATE: I missed a piece of the CSS code so years weren’t displaying correctly. This is now fixed.

For more design tips and tricks like this, be sure to subscribe to Blog Design Guy. If you have your own blog design question, feel free to contact me via the Free Help page or by using the form below.

Oops! We could not locate your form.

Similar Posts:

None Found