Tutorial: Create a Very Informative Archives Page

by Alex

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
  4. Files Needed
  5. Standard WordPress Themes: style.css, archives.php
  6. 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.

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 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

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

Back to the top

by

To learn more about this author and see all of their posts, click below.

View Full Profile →

Discover the Real Meaning...

of what it means to master the psychology of your blogging practice. Find out one of the most missed aspects to blogging now, totally free!

Abdul June 14, 2009 at 4:42 pm

Great tutorial, I’m going to try to get this up on my blog since I also use Thesis. Thanks for sharing it :) I would however love to see a tutorial on how you got your “You May Also Be Interested In…” to display the thumbnails and the “subscribe now” box on the opposite side.
.-= Abdul´s last blog ..Content That Will Keep Visitors Coming Back =-.

Thumb up 1 Thumb down 0
Alex June 14, 2009 at 9:18 pm

Thanks for the comment Abdul.

I have actually included that in this tutorial here: http://www.blogussion.com/blog/thesis/4-ways-customized-thesis-theme :)
.-= Alex´s last blog ..Maximize Your Earnings Through the Thesis Affiliate Program =-.

Thumb up 0 Thumb down 0
Abdul June 15, 2009 at 3:06 am

Ah great! Thanks for sending me there, I probably would have never found it.
.-= Abdul´s last blog ..Content That Will Keep Visitors Coming Back =-.

Thumb up 0 Thumb down 0
Alex June 15, 2009 at 7:54 pm

No problem Abdul, the more people that see that tutorial the better! ;)

Thumb up 0 Thumb down 0
Harish | Blogging Kid June 15, 2009 at 8:23 am

Great post Alex. But honestly this post is no where related to me as I don’t know even a dim about coding. And if I try it I get into muddle with it LOL. But awesome tutorial Alex. Should learn a little of designing and coding from you :)

Thumb up 0 Thumb down 0
Alex June 15, 2009 at 7:53 pm

Thanks Harish! Well, the code is all there for you if you want to take a few stabs at it. But yeah, learning some coding for your blog will totally help you later down the road!

Thumb up 0 Thumb down 0
Mandy June 15, 2009 at 8:25 am

Hi Alex,

I’m a thesis user and I just want to check something before I do this tutorial.

Do I create an archives page in wordpress and choose the archive template, then I just copy and paste the relevant code into the custom css and custom functions files in thesis?

Also i’m running WP2.8 and I noticed some of the plugins are only compatible up to 2.6.2 do you think they’ll still work?

Thumb up 0 Thumb down 0
Alex June 15, 2009 at 7:53 pm

Hey Mandy, good question.

Yes, create a new page for archives. By default, Thesis gives you an Archives template already, so just choose that from the “Page Templates” dropdown box in your admin panel. All of the plugins used in the tutorial do work, as they are all pulled right from this blog, and we run on 2.8!

Let me know how it works for you, and good luck! :)

Thumb up 0 Thumb down 0
Mandy June 20, 2009 at 4:34 pm

My page templates drop down menu seems to have disappeared from my admin menu, I just have parent page and order options left, have you had this problem?

Thumb up 0 Thumb down 0
Ali Hussain June 15, 2009 at 7:44 pm

Thankyou for the information and the tutorial, but I think the archive page should not be too much crowded. I display, last 30 posts as well as the most commented posts and a full archive of the posts in an ajax drop-down style.
.-= Ali Hussain´s last blog ..Twitter Taking Over =-.

Thumb up 0 Thumb down 0
Alex June 15, 2009 at 7:48 pm

That even sounds a little crowded! Do you at lest style the posts so they are more readable then just listing them? I hate going through lists like that. :p

Thumb up 0 Thumb down 0
xphunt3r June 15, 2009 at 11:59 pm

this is the thing fro you i am looking for thanks and great dude
.-= xphunt3r´s last blog ..Awesome Eyes in Photoshop =-.

Thumb up 0 Thumb down 0
Web Hosting Blog June 17, 2009 at 5:46 am

This is brilliant! Nice tutorial. Book marked for future purpose.
Thanks

Thumb up 0 Thumb down 0
James 'Thesis Theme Lover' Mann June 17, 2009 at 7:35 am

I have started using Thesis and can’t get enough of it. Currently I am in the middle, well maybe more at the start, of installing thesis on all of my blogs. I have 4 of my 30 some blogs done at this point.

I am learning new things I can do every day but I never thought about making my archive pages more informative and attractive. I will be doing this now as I install thesis on my other blogs.

Keep creating these great posts, they are saving me tons of time.

Thumb up 0 Thumb down 0
Alex June 20, 2009 at 8:56 pm

I’m currently using a plugin called ‘Sexy Bookmarks’, but as I’m always looking for ways to cut down on the plugins that I use, this is perfect for what I want. Thanks for yet another great tutorial.
.-= Alex´s last blog ..Weekend Round-Up 6/20 =-.

Thumb up 0 Thumb down 0
JHS July 9, 2009 at 2:15 am

There is one thing missing: The code that places the thumbnail image in the related posts section as on the Blogussion archives page. Can you provide that, please? Thanks!
.-= JHS´s last blog ..Sunday Stealing: The “I’ve come to realize . . . ” Meme =-.

Thumb up 0 Thumb down 0
Ashton July 15, 2009 at 4:01 pm

Hello Alex, this seems like a great post, just wanted to know how can I make this work for the “Pages” instead of the “Posts” I use my pages as Articles. I would like to create an archive like yours to display the “Articles” [AKA- pages] not the posts. I’m using Thesis to make-over my Blog and could really use the code to insert.
~ Thanks in advance
.-= Ashton´s last blog ..Ask the Right Questions First =-.

Thumb up 0 Thumb down 0
Genaro September 19, 2009 at 1:39 pm

Great tutorial.

Unfortunately, I can’t Install the smart archives plugins.
it says : Parse error: syntax error, unexpected T_CLASS in /homez.302/naromind/www/wp-content/plugins/smart-archives-reloaded/smart-archives-reloaded.php on line 54

I am using wordpress 2.8.4 and thesis theme

Thank you for your help
.-= Genaro´s last blog ..Ce que Google ne fera jamais pour moi =-.

Thumb up 0 Thumb down 0
Barbara September 27, 2009 at 8:43 am

Thanks for your stellar tutorial about customizing archives, Alex, and the accompanying code. I, a true noob using Thesis to start up a cooking blog, have a follow-up “additional needs” question about customizing my archives page to make it more user friendly.

Here goes: the content of my posts – recipes – is not very time specific, so organizing my archives page in the normal way, by year/month, is not needed. Instead, I would like to organize my archives page, as follows:

1) By category, with post title list in alphabetical order.
2) By selected tags, with post title list in alphabetical order.
3) All posts, with post title list in alphabetical order.

I know it’s a big ask, but do you have any additional advice about how to get all this into the custom_functions.php file?

Thumb up 0 Thumb down 0
Alf October 27, 2009 at 10:20 am

Hi
That looks great, however, i am new to this, have bought thesis 1.6. I am not able to get those last 10 post’s show up as teasers. If you look at my front/Home page, that is what i really want my articles page to be like, and then add the option to have the users seach as those other options.
In advance thanks for comment on this one too.

Thumb up 0 Thumb down 0
Lee November 10, 2009 at 9:42 pm

Alex,

I am very impressed with your site. I hope to make my site as functional/usable as your someday. Nice tutorial!

Thumb up 0 Thumb down 0
Nezine December 22, 2009 at 1:16 pm

I am really loving your tutorials. As a programmer, I find it very interesting and come up with new ideas.

Hope to see more!

For Bloggers Who want to Stop Writers’ Block

Thumb up 0 Thumb down 0
Boni April 12, 2010 at 6:33 am

I found this tutorial is not working. I use thesis 1.7 and i found my website is look bad and give this message :
Parse error: syntax error, unexpected ‘}’ in C:\my XamPP\xampp\htdocs\localblog\wp-content\themes\thesis_17\custom\custom_functions.php on line 424

Thumb up 0 Thumb down 0
Willie Jackson April 12, 2010 at 4:28 pm

Just implemented this. Nice work my friend. Thanks!
.-= Willie Jackson´s last blog ..We’ve got it all wrong =-.

Thumb up 0 Thumb down 0
Benjamin August 8, 2010 at 11:46 pm

This works great on Thesis 1.8. Thank you very much for your contribution to the WP community. Its lovely!

Thumb up 0 Thumb down 0
Rob @ Atlanta Real Estate December 21, 2010 at 2:09 am

Thesis is the greatest isn’t it?

There’s a way to do just about anything you can think of, and normally in a pretty safe way.

Thumb up 0 Thumb down 0
Lalit February 24, 2011 at 11:48 am

Excellent work Alex! I am a big fan of Thesis and a big fan of you too! Thanks for all these codes!

Thumb up 1 Thumb down 0

Comments on this entry are closed.

Previous post:

Next post: