I have received a couple emails from my readers asking me what plugin I use to generate my archives page. Well, truth be told, my archives page is not a plugin. I hard coded that page using WordPress’ built in template tags. Since there is a lot of interest in this page, I decided to post a walk through of how you can recreate my archives page on your own blog.

All of the code below is show via images for posting reasons. Click the images to view the high res versions of the code. If you would like to cut and paste code, find the link the the text file containing the full code in step 10. I would advise against cutting and pasting because this code is specific to my custom templete and will not display correctly on your blog. It is better to understand everything below so you can customize it to your site.

  1. The first step to creating your archives page is to understand how the WordPress template system works. I would recommend your read up on the WordPress documentation before you proceed. http://codex.wordpress.org/Using_Themes
  2. What you want to do now, is locate your template directory which is normally at: http://www.yoursite.com/wp-content/themes/yourtheme
  3. We now need to create a new file called archives.php and upload it to this directory. This file should be blank, but have the name and extension of archives.php.
  4. Open the file archives.php with a text editor so we can hard code the archives page in PHP. To start we are going to label the page as the archives template. Retype the below code into the very top of the archives.php page. This allows WordPress to link the template file to the page we will create later.
  5. Next, we need to enter the template skeleton into the archives page. This code is specific to your template. Every template page you have should have a basic structure built into it looking something like this:

    This is very important because this is what includes your header, footer, and any side bars your site uses. When we are done, if your page doesn’t have the correct header, footer, or the necessary sidebars, come back and look at your skeleton code and make sure it matches the other template pages. After you have correctly entered your skeleton code, you should know where the main content area is in the skeleton. For me, it falls between the header and the right sidebar.
  6. Now we are actually going to enter the guts of the archives page. I have 3 different types of archives sections: Archives by month, by tag, and by post. I am going to walk through these individually. All of these sections have a title wrapped in a <h2> tag. This creates the titles of the sections.
  7. The Archives by Month section is very simple. To auto generate the list of months, I use the WordPress tag “wp_get_archives(‘type=monthly’).” To learn more about this tag, check out: http://codex.wordpress.org/Template_Tags/wp_get_archives. This tag is very complex, so I would recommend you refer to the link above and explore all you can do with it by setting different attributes. The way I use the tag, is so that it outputs an HTML list item. To prepare for this list, I wrap the tag in a unordered list HTML tag of formatting purposes.
  8. The next section is Archives by Tag, to build this, I used the built in WordPress tag cloud function. The tag for this is “wp_tag_cloud(”).” You can read more about this tag here: http://codex.wordpress.org/Template_Tags/wp_tag_cloud. I use this tag with no attributes set, but you can really customize how the tags are displayed by using different attributes that work with the tag.
  9. The final section is the Archives by Post which provides a nice organized list of all your post and the dates they were published. This part is a bit more complex because this doesn’t use a specific template tag, but is something I coded by hand. The best way to explain this one is to walk you through the code which I do below:

    If you want to adjust how the date appears, please check out the specifics of the_time tag here: http://codex.wordpress.org/Template_Tags/the_time
  10. Well, that is how to create the 3 sections individually, now lets look at the archives code in full. Keep in mind yours wont look exactly like mine. I have very specific formatting included in my page so yours will look a bit different from mine. TEXT VERSION OF COMPLETE CODE CAN BE FOUND HERE
  11. Upload the completed archives.php file to your template directory as discussed in step 2.
  12. Next, we need to create a page to associate this template file with. This is done through the built in WordPress admin panel.
  13. To start off you need to create a page using the WordPress admin panel. Login to http://www.yoursite.com/wp-admin/ from there you should see a button labeled “Write a New Page.”
  14. Now you will find yourself on the “New Page” edit screen. Start by entering the title: “Archives”.
  15. Now scroll down the page to the “Comments & Pings” section. In this section make sure you have bother boxes “Allow Comments” & “Allow Pings” UNCHECKED.
  16. Next, scroll down a bit further to the “Page Template” section and from the drop box select the archives.php file we created earlier.
  17. The final step is to scroll back to the top of the page and publish the page. Once you have published the page you should see the link to the archives page appear in your navigation. Now, depending on your template or not, you might have to setup a direct link to your archives page.

Well, that is it. I have included a couple of links to different WordPress articles concerning items I discussed above. I hope you are successful in creating your archives page, and I will answer questions and address concerns to the best of my abilities in the comments section below.

Additional Help