How to make pretty archives in WordPress

How to make pretty archives in WordPress
June 14, 2009 Steph

If you have a wordpress blog, you will notice that the default archives for a large amount of posts is not very pretty. As with most open source applications, there’s usually a plugin or addon that someone has kindly created.

For archiving posts, I’ve found a nice little plugin named Snazzy Archives created by Vladimir Prelovac.

The one problem I had was the theme I was creating had a fixed width and I was using the option “Display Years in rows “. The archives by default displayed in a table with multiple columns which were getting “cut off” because of the hidden overflow.

To rectify this I made a small tweak to the plugin changing tables to floating divs. To adjust Snazzy Archives to fit within a fixed width I changed the following:

Open snazzy-archives.php and look for the following code

($fx ? 'li' : 'td valign="top"') . '>
'

Replace with

($fx ? 'li' : 'div class="archiveyear"') . '>
'

Also look for the following code:

($fx ? 'li' : 'td valign="top"') . '>
'

Replace with:

($fx ? 'li' : 'div class="archiveyear"') . '>
'

Finally, look for the following code:

($fx ? 'li' : 'td valign="top"') . '>
'

Replace with:

($fx ? 'li' : 'div class="archivemonth"') . '>
'

To make this prettier, open your default style sheet for your theme and modify the divs to your liking, for my theme I’ve added the following:

.archivemonth {
width: 120px;
float: left;
margin: 10px 10px 20px 0;
}

.archiveyear {
clear: both;
}

.sz_date_yr {margin-top: 20px;}

Sign up for Shopify and receive 10% off my services

Get Started!