In my most recent blog design I’ve cre­ated a single page for all of my post archives. Pre­vi­ously, I had links to my monthly archive pages in the side­bar. After blog­ging for about 14 months, this list became a little bit unwieldy. My solu­tion was to move the entire archives sec­tion out of the side­bar, and into its own page. The archives page is now more promi­nently linked from the main nav­i­ga­tion bar.

Unfor­tu­nately, doing all of this in Word­Press is not quite as straight­for­ward as one might hope. Now that I have mine all set up, I fig­ured I’d post a walk­through of how to set up some­thing like my archive index page.

Get A Plugin To Do the Dirty Work

Unless you’re inter­ested in writ­ing the PHP code and MYSQL queries to retrieve all of your archives in an orga­nized fash­ion, a plugin is the way to go. After a quick Google search, I found the SRG Clean Archives plugin. This plugin is quite nice I’ve found. It’s reala­tively easy to imple­ment and also (and impor­tantly), it’s also very easy to modify to fit your site design.

The plugin will give you a list of all your post titles, orga­nized by month. There is also the nice fea­ture where the post titles begin with a post date. Check out the clean archives demo page for an example.

Simply install the plugin like any other normal plugin and then acti­vate it.

Set Up the Archive Page In WordPress

The next step is to set up the actual archive page in Word­Press. There is a tuto­r­ial in the Word­Press codex about how to do this called Cre­at­ing An Archive Index. I’m just going to briefly out­line the steps here.

archives.php

Open your archives.php file. If you’re using a basic tem­plate, then this file prob­a­bly already exists. If you’re using the default Kubric theme, your archives.php file will look like this:

<?php
/*
Template Name: Archives
*/
?>

<?php get_header(); ?>

<div id="content" class="widecolumn">

<?php include (TEMPLATEPATH . '/searchform.php'); ?>

<h2>Archives by Month:</h2>
    <ul>
        <?php wp_get_archives('type=monthly'); ?>
    </ul>

<h2>Archives by Subject:</h2>
    <ul>
         <?php wp_list_categories(); ?>
    </ul>

</div>

<?php get_footer(); ?>

As always, I would sug­gest making a backup of this file before chang­ing any­thing. Now modify the archives.php file to look like this:

<?php
/*
Template Name: Archives
*/
?>

<?php get_header(); ?>

<div id="content" class="widecolumn">
    
</div>

<?php get_footer(); ?>

If you’re using your own tem­plate (like I am), then you may need to either update or create the archives.php file to make sure it is con­sis­tant with your blog design. A good start­ing place for this is to simply copy your single.php file to your archives.php. Now, delete the entire “loop”.

Note on Page Tem­plates
You can create any kind of page tem­plate you want. All you need to do is insert the fol­low­ing code at the very top of your PHP file.

<?php
/*
Template Name: template-name
*/
?>

Make sure your archives.php file starts with these lines, or else you’ll be bang­ing you head against the mon­i­tor trying to figure out while ‘Archives’ isn’t listed as an option in the Page Tem­plate drop­down menu. Believe me, I speak from experience.

Create A Page In WordPress

Now have to set up a plain old page in WordPress.

1. Login to the Word­Press Admin area
2. Go to Manage -> Pages
3. Click Create a new page
4. Enter an appro­pri­ate title. This will be the title of your archive index page.
5. Leave the con­tent area blank
6. In the Page Template box, select Archives.
7. In the Page Slug box. Type some­thing suit­able as this will be the perma­link for your archives page (http://www.your-blog-name.com/page-slug/).
8. Click Save.

Link To Your Page

Now obvi­ously, you have to create a link to your new archives page. We already set it up, com­plete with the URL. Yours should be in the form of http://www.your-blog-name.com/page-slug/. Just make a link to it some­where on your site.

Call the Plugin

As you’ll notice, our fancy Archive Index is empty. In order to get all of our archives in there, we have to use a simple PHP func­tion to call the SRG Clean Archives plugin.

Open your archives.php file again. Find this sec­tion of the page:

<div id="content" class="widecolumn">

</div>

Now add the fol­low­ing PHP func­tion to call the plugin:

<div id="content" class="widecolumn">
    <?php srg_clean_archives(); ?>
</div>

Save the archives.php file and refresh your browser. You should now see a nice list of all of your archives.

Customization

As I noted ear­lier, the SRG Clean Archives plugin is nice because it’s easy to modify if you want to. The Clean Archives web­site is well doc­u­mented and the plugin con­tains a readme file explain­ing this as well.

The default style for SRG Clean Archives is to output the month and year, sur­rounded by <strong> tags. You might want some­thing else, like a list or header tags.

To change this, open the srg_clean_archives.php file in your plu­g­ins folder and find the fol­low­ing line:

 echo get_archives_link($url, $text, '','<strong>','</strong>');

Modify the strong tags to suit your needs. For exam­ple, mine now looks like this:

 echo get_archives_link($url, $text, '','<h2 class="archivemonth">','</h2>');

You can find more infor­ma­tion about this on the SRG Clean Archives plugin web­site.

SRG Clean Archives also pro­vides you with class names so that you can style list how­ever you want in your CSS. I’ve added the fol­low­ing styles to mine:

/* For Archive page */
h2.archivemonth {margin:30px 0 0 0;padding:0;}
    h2.archivemonth a:visited {color:#9db550;}
ul.archivelist {border-bottom:1px #ddd solid;list-style:none;margin:0;padding:0;}
    ul.archivelist li {border-top:1px #ddd solid;}
        ul.archivelist li a {display:block;padding:2px 0 0 20px;}
        ul.archivelist li a:link, ul.archivelist li a:visited, ul.archivelist li a:active {color:#000;} 
        ul.archivelist li a:hover {background-color:#eee;color:#000;text-decoration:none;}

Note: I changed SRG’s default class name from ‘postpermonth’ to ‘archivelist’.

That’s All

Well, that’s pretty much it. I hope you guys find this useful. Feed­back and cor­rec­tions are always appreciated.