I don’t mean to toot my own horn here, but have you seen our Archives page? It’s pretty awesome if I do so say so myself, and I received numerous emails and comments about how I made my Archives page. So today, I’m going to show you how!

I will try to make this tutorial as detailed as possible so you can create an almost exact replica of our Archives page onto your own blog.

Download this Entire Tutorial

At the end, I am going to post a file you can download that will be compatible with a regular WordPress theme, and if you use Thesis, the entire function!

Checklist

Here are some of the things you will need below to do this tutorial. Not everything is necessary, but I am writing the tutorial to match our Archives exact.

Plugins

1. Smart Archives Reloaded
2. Recent Posts Plugin
3. (Optional) Random Posts Plugin

Files Needed

4. Standard WordPress Themes: style.css, archives.php
5. Thesis Theme Users: custom.css, custom_functions.php

Setting up the Page

I always like to set up the HTML before I start styling the page, so I am going to break down everything on the page in this section and you can add whatever you want, and exclude anything you don’t want.

A. Search Box

Give the user the option to search your blog from your Archives page.

<h5>Search Blogussion</h5>
<p>Use this search form below to look for a specific posts with specific keywords in them.</p>

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input size="20" type="text" value="To search, type and hit enter" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" name="s" id="s" />
</form>

B. Display Smart Archives

Moving along, we have the smart archives section. It looks like this, right under the Search form:

This plugin automatically links to monthly archives by the year.

Adding this to your page is simple, just add the line <?php smart_archives(); ?> wherever you want it to appear.

By default, Smart Archives shows a list of your blog posts, and just the block showing the monthly archives. To just show the monthly archives, go into your Admin panel and go to Setting → Smart Archives → Format → Tick the “block” option and click “Save Changes.”

C. “Search by” Box

The box that shows “Search by Category,” “by Author” and “Random Posts” is extremely useful, and also the most informative part on this whole archives page. You can change whatever content you want to display in this box with little coding knowledge.

Here is the code to outline the box:

<div id="searchby">
 	<div id="inner">
 		<ul>
 			<li class="title">Search By Category</li>
 			<?php wp_list_categories('&title_li='); ?>
 		</ul>

 		<ul>
 			<li class="title">Search By Author</li>
 			<?php wp_list_authors('show_fullname=1&optioncount=1&'); ?>
 		</ul>

		<ul>
			 <li class="title">Random Posts</li>
			 <?php random_posts(); ?>
		 </ul>
	 </div>
 </div>

You can change whatever you would like to in there. I recommend you at least keep categories and Authors (if you have more than one author).

D. Display Latest Posts

This may or not be useful to you, it depends on what you like on your Archives page. The code below is assuming you have the highly customizable Latest Posts plugin (see checklist above).

Paste this wherever you want:

<h5>10 Latest Posts</h5>
 <?php recent_posts(); ?>

For formatting like our Latest Post options (again, assuming you used the plugin from the checklist) follow these steps. Go to your Admin Panel → Settings → Recent Posts → Output (at top of page) → and type in the follow into “Output template:”

<div class="recent">
	<h3>{link}</h3>
	<p>{date} &middot; {commentcount} Comments &middot; <a href="{url}#phighlights">Summary</a></p>
	<p>{snippet} [...]</p>
	<p><a href="{url}">Read Full Post &rarr;</a></p>
</div>

E. Tag Cloud

I think you should always have one of these things floating around (even as obnoxious looking as they are)!

<h5>An Obnoxious Looking Tag Cloud</h5>
 <?php wp_tag_cloud(); ?>

Styling the Page

Now that we have our page set up, it’s time to add the CSS to it! This will make our code display properly instead of the jumbled up mess it probably is right now!

The search box and Smart Archives do not need any custom styling. They will just inherit the styles from your own theme you are using now.

A. Style the “Search by” Box

This box has a few different things going on here, so I am going to break it down for you.

Creating the Outline

The black box surrounding the white box is just to make it look good

The outline in my opinion makes the box look pretty good. It should match any style as it is black and white. It’s a personal choice to include the outline, I think it does make it stand out a little bit. But it is very easy to remove it, so if you don’t want it then you just simply need to remove the #searchby line in your Style sheet.

Here is the CSS code to add that outline:

#searchby{background: #454343 url(images/blackGrad.gif) repeat-x; border: 1px solid #0A0A0A; border-top: 0; margin-bottom: 1.5em; overflow: hidden; padding: 1em }

#searchby #inner {background: #FFF; border: 1px solid #000; overflow: hidden }

Here is the black gradient used in the box, if you would like to use it on your blog as well:

Right Click → Save Image As

Align the Boxes into 3 Columns

Without this CSS, your boxes are probably vertically aligned, instead of next to each other (horzontally aligned). With just one line of code, you can make these columns next to each other:

#searchby ul {float: left; list-style-position: inside; margin: 0; padding: 1em; width: 28%}

You can change the width and padding however you like until it fits your theme. I use percentages because of the way this theme in particular is coded, and you might want to use a different kind of formatting like PX or EM instead. It’s up to you though.

Other Little Styles

Here are just some other things you can add to make the box look better:

#searchby li { padding-bottom: 4px }

#searchby li.title{ font-size: 18px; list-style-type: none }

The Whole Code

#searchby{background: #454343 url(images/blackGrad.gif) repeat-x; border: 1px solid #0A0A0A; border-top: 0; margin-bottom: 1.5em; overflow: hidden; padding: 1em }

#searchby ul {float: left; list-style-position: inside; margin: 0; padding: 1em; width: 28%}

#searchby li { padding-bottom: 4px }

#searchby li.title{ font-size: 18px; list-style-type: none }

#searchby #inner {background: #FFF; border: 1px solid #000; overflow: hidden }

B. Style Latest Posts

There is just a few styles here, this will give it more formatting and make it look great.

.recent { border-bottom: 1px dashed #CCC; margin-bottom: 2em }

	.recent h3 a { font-size: 22px; line-height: 20px; text-decoration: none }

	.recent .metadata { color:#888; font-size:11px; text-transform:uppercase}

Looks Pretty Good, Right?

If you have everything working, then I am sure you will be happy with the results! Post here if you have any problems, or notice any mistakes in this tutorial. You can proceed to download the source code for the tutorial below.

Download Options

Do you use Thesis? Use this link below to get the entire function to this tutorial:

Download Thesis Compatible Archives

Don’t use Thesis? Use this for other themes:

Download

Related posts:

1. How to Create an Informative “404 Error” Page

2. 4 Great Ways I Customized my Thesis Theme

3. How To: Wrap the post title around an image