Jazz Up Your Archives Page

You can stick with the standard Archive page that comes with Thesis or you can add some spice.

If you would like to give your readers the option of viewing your category and month archives, plus your last 50 posts and your tags - then use the code that follows.

  • Remember to first create a page using the ‘Archive’ template in the drop-down box in ‘new post’ mode.

If you want to show more or less tags

  • Change the number from ’0′ (zero) which is unlimited and will show all, to a specific number.

If you want to show more or less posts

  • Change the number from ’50′ to whatever you like.
  • Remember to change the text between the <h3> tags, e.g. “…Last 50 articles…”

Copy and paste this code into your custom_functions.php file

function my_archive() {
?>
<div class="archive">
<div class="archive1">
 <h3>By Category:</h3>
 <ul>
 <?php wp_list_categories('sort_column=name&title_li='); ?>
 </ul>
 <h3>By Month:</h3>
 <ul>
 <?php wp_get_archives('type=monthly'); ?>
 </ul>
</div>
<div class="archiver">
 <h3>By Post: (Last 50 articles)</h3>
 <ul>
 <?php wp_get_archives('type=postbypost&limit=50'); ?>
 </ul>
</div>
</div>
<?php
}
remove_action('thesis_hook_archives_template', 'thesis_archives_template');
add_action('thesis_hook_archives_template', 'my_archive');

Copy and paste this code into your custom.css file

/*-----archives-----*/
.custom .archive h3 {margin-top: 0;}
.custom .archive ul {font-size: .85em; }
.custom .archive1 { float: left; width: 40%;}
.custom .archiver { float: right; width: 60%;}

You should now see something like this:

Archives jazzed up

Code adapted from Matt Flies and enhanced after visiting WordPress Codex.

{ 30 comments… read them below or add one }

should I October 17, 2009

what should I put in the robots.txt regarding this page? (archive)
and should I nofollow it?
I’m afraid that I’ll be penalized by google.

Reply

Somone Bull October 18, 2009

Anything done with good intentions shouldn’t be penalised by Google. Think of what ‘normal’ html webistes do with their code and how different blog sites are. If it is a standard function of WordPress or an option in coding and 99% of all actions on your site (e.g. article content) is done with good intention, how is Google going to identify an advantageous decision. A lot of people are putting the fear of God into people about SEO ‘tactics’ when they are just design options often built into many themes. At the end of the day just do what you are comfortable with without worrying about scare tactics by others. My opinion only. :-)

Reply

liewzy October 21, 2009

Am I wrong? I think you missed out the .
.-= liewzy´s last blog ..LiewZY: @P1W1MAX Nevermind :) =-.

Reply

liewzy October 21, 2009

I mean div class name

Reply

Somone Bull October 22, 2009

The code works fine on my sites without changes.

Reply

TechChunks January 12, 2010

Just curious. Is there a version that may work on a Non-Thesis theme? Sorry if I’m asking for too much :)
.-= TechChunks´s last blog ..TechChunks is Google Page Rank 2 Now and Wishes You A Happy New Year 2010 =-.

Reply

Somone Bull January 12, 2010

I’d say it would as all the php code relies on standard WordPress calls. There’s nothing unique about it to tailor it to Thesis. Give it a run and let me know how you go.

Reply

Smart Blogs January 23, 2010

Hi I want to ask why in my thesis theme archive can’t same like your preview
this is my archive please give me some tutorial, thank you
.-= Smart Blogs´s last blog ..Lenovo IdeaPad G550-NTD9AFR Dual Core and Windows 7 Review =-.

Reply

Mathdelane January 25, 2010

Hi Somone,
This is a great tutorial as usual and I have incorporated this on my blog however as I merely copy-pasted the codes, how do I make it the same as the screen shot above wherein the last 50 articles are in parallel columns with the categories?
.-= Mathdelane´s last blog ..Can’t Open Yahoo Mails? =-.

Reply

Somone Bull January 25, 2010

I just realised I had deleted my css for archives the last time I revamped the site and only had the one column like your archives have at the moment. I just added the css to my custom style sheet (as it is above) and it worked a charm – back to 2 columns. I notice that my column is wider. Perhaps if you try making your archives ‘page’ template no sidebars for a moment to see if it accommodates two columns if it is wider.

Otherwise, I would check your php as it appears in your custom-functions.php file to make sure you didn’t lose anything with copy and paste. I usually paste into a text editor like notepad before I paste into my site’s code sheets.

See how it goes.

Reply

Mathdelane January 26, 2010

Hi Somone,
Thanks for the response. I’ve tried what you suggested but apparently switching the template to “no sidebars” made the contents (links) disappear.
.-= Mathdelane´s last blog ..Working with Google Translate Client for Windows =-.

Reply

Shannon May 16, 2010

Thanks for this tutorial. To get the styling to work, I had to assign classes to the divs in the php code and it worked fine then.

Reply

Arun Basil Lal July 14, 2010

Thanks for this, worked perfectly :)

Reply

Kang Asep July 15, 2010

Hai, thank you for your turorial, i’ve use it at my blog, I also included your tutorial into my blog, I hope you do not mind

regards,

asep

Reply

Greg July 25, 2010

Hi Somone
Great tutorial.I was having a lot of problems with my archives page
I deled my old page,created a new one,pasted your codes and presto it works a treat

I have only experienced disaster playing around with the custom_functions.php files.
Your code has made a person happy
Regards
Greg

Reply

Dada Aromin August 16, 2010

The standard Archive is commonly used because it is easier and the steps are basic and simple. However there are some websites that offer the same, but it is complicated to use.

Reply

Lauren Rains August 19, 2010

Hey Somone!

This is a great toturial! Just what I’m looking for actually. But I am running into a bit of a roadblock.

Just as Mathdelane was saying above, I can’t seem to get it to display in 2 columns. My Recent 50 posts simply goes to the bottom. I pasted the code into notebad and carried copied it form there into my functions file.

Any thoughts? Thank You for your help!
-Lauren :)

Reply

Somone Bull August 19, 2010

I checked out your custom.css file but it doesn’t seem to have anything in it. Try pasting the css in and saving again. You might want to check your custom_functions.php file to see that the code hasn’t changed since pasting it. Sometimes some symbols come up differently. Did you include the posts part of the function and beyond? Let me know how you go.

Reply

Lauren August 19, 2010

Hey Somone!

Thanks for the awesomely fast response! Actually the reason you see nothing is I have been building it on local host and then updating my live site as I go. Since I’m a noobie I already screwed up the other day on the code and got that lovely Syntax Error message, so, I’m being much more careful now! :P I’m having a lot of fun though!

So, I’ve gone ahead and pasted the code above into notepad and from there copied and pasted it into my functions and css file. All the info is coming up that’s supposed to, just the 2 column bit isn’t happening.

Thanks for taking the time to reply to my comment!

Reply

Somone Bull August 19, 2010

I have a second WordPress installation on my server and use Thesis and play ‘live’ but away from search engines’ reach. Gives me a more realistic/accurate outcome (I think). Okay, so no second column. Umm. Without seeing the code, or trying it ‘live’ I can’t offer more suggestions. Take two aspirin and sleep on it ;-) for now.

Reply

Sarah August 20, 2010

Hi there,

To get the archive page to display in two columns, you need to change the custom_functions code to include the class names.

Like this:

function my_archive() {
?>
<div class=”archive”>
<div class=”archivel”>
<h3>By Category:</h3>
<ul>
<?php wp_list_categories(‘sort_column=name&title_li=’); ?>
</ul>

<h3>By Month:</h3>
<ul>
<?php wp_get_archives(‘type=monthly’); ?>
</ul>

</div>

<div class=”archiver”>

Reply

Lauren August 20, 2010

Got it! Thank you Sarah and Somone for your help!

I truly appreciate it!!!!

Reply

SQL Like December 21, 2010

I have got the archives page working for my blog, but I am getting category — tags – last 50 posts .. one below the other and not the way you have shown, what shud i do to achieve that kind of look that you have shown in the screen shot?

Reply

Somone Bull January 2, 2011

Sorry I took so long getting back to you. For some reason WordPress stripped out the

and related div classes. If you go to your custom.css file and manually type in the div class items (archive, archive1, archiver) before each or re-paste the above code.

Note I have now taken away the tag custom_functions.php code (I have too many tags to list) so if you want to keep the tags listed, keep that code in and just adjust the top portion.

Reply

Jagan Mangat January 25, 2011

Thank you very much for this help.
I have edited my archives page for sample of results you can check my page people.
Thanks!

Reply

Somone Bull January 26, 2011

Very cool red bevelled borders to your background image. Sweet archives too.

Reply

Trish Lindemood February 10, 2011

Just tried this out on my site (Thesis v. 1.8) – and it worked like a charm! – thanks for the great tip!

Reply

Roseli A. Bakar March 6, 2011

Thanks. Manage to get rid of one plugin for doing this. Cool!

Reply

Somone Bull March 7, 2011

Hi mate. Long time no hear. I’ve had a bit of a hiatus from blogging whilst getting the boys ready for school this year. Great to see your Blogging for a local audience is doing really well.

Reply

Gouri November 15, 2011

Thanks for these cool customization tips. Just curious to know whether there a way to display only categories divided across 3 columns..

Reply

Leave a Comment

Previous post:

Next post: