Posted on Mar 22, 2008

Creating a Wordpress Archive Page – PHP Required

Not long after starting this site I found myself wishing I had configured a few things differently. I’ve mentioned this before and have made some changes since going live. Another item I’ve wanted to add was a time based historical archive.

Most Wordpress themes come with an archive. And I really like the way Derek created the categorical archives for the grid focus theme (click archives in the nav bar above to observe). But I also wanted a reverse chronological list of all activity for my site. I thought this would be a fairly easy task to complete and that there would be a large variety of configurable plugins to meet my needs. I know next to nothing when it comes to php so I was hoping someone else had made it easy for people like me.

Well, the whole idea took longer than I thought to implement and learning a bit more PHP was required to get the exact result I wanted. I had some trouble finding really helpful tutorials online so I thought I would share what I learned. Hopefully others will find this useful.

Archive Plugins

First thing I did was find a archive plugin that had some configuration options. I ended up using Smart Archives from Justin Blanton. He’s built in a couple of options for different styles of lists – a block list of years and months or a reverse chronological lists of posts. The latter was exactly what I was looking for.

Below is a screen of the default page after installing the plugin and adding a bit of styling to my sites CSS:

But I also wanted the date beside each post title. This is where reading the code was needed.

The PHP

So I opened up the smartarchives.php file in Coda and looked around. The first thing I had to do was add the post date to the SQL statement retrieving records from the wordpress database. Pretty easy – I added the , post_date to the select statement shown here:

SELECT ID, post_title, post_date FROM $wpdb->posts

The next step was to get the post date values to display along with the post titles. This was also fairly simple. I added the following values to the statement below: .$post->post_date.

.$post->post_date.’ ‘.$post->post_title.

This results in the date then a space and then the post title. But the date defaults with the exact post time included, which I didn’t want. You can see the results here:

So the last step was to display the date only without the time. This turned out to be the trickiest part due to my lack of php knowledge. Finding the correct syntax for the date function was not hard. Here’s how is should look:

.$post->post_date = date(”d-m-y”,strtotime($post->post_date)).

But it took me a few minutes to get the correct syntax for creating the echo string. Finally I realized that the pieces of html are encapsulated in single quotes and the pieces of php are encapsulated in periods. So here is the entire string including post date and post title:

.$post->post_date = date(”d-m-y”,strtotime($post->post_date)).’ ‘.$post->post_title.

The Archive Page

So now the archive page is formatted as I wanted. The results now look a bit cleaner without the time – see here:

Now I’m happy with the look of the page. And I wrote these steps down for people like myself – no extensive php knowledge, but comfortable in a text editor and familiar with programming basics. I’m sure php gurus out there could have got this done in less than five minutes. And if anyone has a better way to implement this idea, please let me know.

All the credit to Justin – he’s built a great plugin to get started. All I did was mess around make a few minor tweaks to fit my needs. If your wordpress theme does not make use of an archive page already, check out Justin’s plugin.

Thanks also to Chris Leboe for some good php tips regarding the format of the dates.