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.
- Smart Archives Reloaded
- Recent Posts Plugin
- (Optional) Random Posts Plugin
- Standard WordPress Themes:
style.css,archives.php - Thesis Theme Users:
custom.css,custom_functions.php
Plugins
Files Needed
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} · {commentcount} Comments · <a href="{url}#phighlights">Summary</a></p>
<p>{snippet} [...]</p>
<p><a href="{url}">Read Full Post →</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:
25 Discussions
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
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
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
No problem Abdul, the more people that see that tutorial the better!
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
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!
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?
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!
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?
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
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
this is the thing fro you i am looking for thanks and great dude
xphunt3r´s last blog ..Awesome Eyes in Photoshop
This is brilliant! Nice tutorial. Book marked for future purpose.
Thanks
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.
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
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
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
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
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?
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.
Alex,
I am very impressed with your site. I hope to make my site as functional/usable as your someday. Nice tutorial!
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
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
Just implemented this. Nice work my friend. Thanks!
Willie Jackson´s last blog ..We’ve got it all wrong
This works great on Thesis 1.8. Thank you very much for your contribution to the WP community. Its lovely!
8 trackbacks