Pro Blog Design

Better Looking Blogs Grow Faster

First time? Start here.

Monthly ArchivesArguably, the most important feature in your blog's design is its usability. Can the reader get what they want? A large part of that is giving them the space to manoeuvre unhindered by clutter and superfluous gadgets.

In order to keep your blog clutter-free, you must be ruthless with your sidebar content. There are thousands of Wordpress plugins available, and it is very tempting to install them all. The wise blogger knows to add only the options which will be beneficial to the user, which begs the question;

How are the monthly archive links useful?

In most cases, they aren't. The monthly archives are a remnant from when blogs were literally online diaries. When the posts are a biography of someone's life, then it can indeed be very interesting to look back to what they were like in the past. The monthly archives were also a lot less hassle than properly categorising posts.

However, blogs are much more than that nowadays. The information is no longer just personal, it is extremely useful! How could a reader find your best posts by picking a meaningless month name? They couldn't, and that is why a monthly archives list is usually just an unnecessary source of clutter in your sidebar.

To delete the archives from your sidebar, open sidebar.php, and delete the following line: (NB - There may also be text between the brackets.)

<?php wp_get_archives(); ?>

How To Show The Monthly Archives in a Drop Down in Wordpress

The biggest problem with monthly archives is that the size of the list grows every single month, taking up more and more room. There is however, a way of getting around this; use a drop-down list. The drop-down takes up very little space until clicked on, and is a suitable method of browsing through the months because they are all in order, making a particular date easy to find.

The code to add this drop-down has actually been put into the Wordpress Codex already, but I'll paste it below anyway.

<select name="archive-dropdown" onChange='document.location.href=this.options[this.selectedIndex].value;'>
<option value=""><?php echo attribute_escape(__('Select Month')); ?></option>
<?php wp_get_archives('type=monthly&format=option&show_post_count=1'); ?> </select>

And there you have it, a much more compact method of showing the archives. You can see this method being used well on Mike Goad's Exit 78, where Mike has actually used the same technique on his long category list as well.

If you're currently showing a long list of months on your blog, then the best advice is to either drop, or drop down that list. You'll notice the different immediately.

Discussion on This Article

  1. Matthew Blancarte
    August 12th at 1:38 am GMT
    Comment #1

    Good points here. It drives me crazy when I go to a blog that is cluttered with useless crap and riddled with ads.

  2. Michael
    August 12th at 5:24 pm GMT
    Comment #2

    Thanks for the tips. I really like your blog design btw. Good job.

  3. Michael Martin
    August 12th at 8:31 pm GMT
    Comment #3

    Matthew - Couldn't agree more.

    Michael - Back at ya!

  4. Ken Xu
    August 13th at 2:01 am GMT
    Comment #4

    Nice tips. I have erase archives in my sidebar and make it into my page file using smart archives plugin. Stuffing sidebar will many things tend to pull reader's attention out of the original content and some will not read it thoroughly! :(

  5. pablopabla
    August 13th at 6:55 am GMT
    Comment #5

    Thanks for bringing this up. I never thought about it before and now that I am thinking about it, what you said makes sense. I might very well implement your ideas.

  6. Michael Martin
    August 13th at 11:44 am GMT
    Comment #6

    Ken Xu - I see what you've done there, and I like it a lot! You have the same advantages of showing things chronologically (Including showing how long your blog has been around for), but because the article names are also shown, it's actually useful. Great implementation!

    pablopabla - It would be worth experimenting with probably. If you miss the archives after a week, then you can always put them back in. :) (If you like the archives because it shows that you've been blogging for months now, I can understand that. But your blog already shows that it is active by listing the comment counts next to the category names, and the most recent comments.)

  7. TechZilo
    August 14th at 9:32 am GMT
    Comment #7

    Thanks for the tips. I used a similar hack for Blogger, when i was on it. Now, I have archives, but going by the looks of it, I'll probably take it off completely!

  8. Michael Martin
    August 14th at 12:08 pm GMT
    Comment #8

    I do think it would be worthwhile. For one thing, with the space you're freeing up, you could add in a different widget if you liked?

    Perhaps a blogroll? Latest comments? Posts?

    There are quite a few things that your readers might find more useful. :)

  9. Patricia - Spiritual Journey Of A Lightworker
    August 18th at 6:40 pm GMT
    Comment #9

    Great article. Thanks for the information. I already moved my archives further down the page and added a Favorite Post list near the top to direct people to the most read articles.

  10. Michael Martin
    August 18th at 7:26 pm GMT
    Comment #10

    Good idea Patricia. A Favorite Post list is an extremely useful addition to your blog; especially for first time visitors, because they can get straight to your best articles. :)

  11. Mommy Zabs
    August 20th at 3:14 pm GMT
    Comment #11

    I'll go do that now!

  12. Michael Martin
    August 20th at 6:41 pm GMT
    Comment #12

    Hi Mommy Zabs. I can see you've done it on your blog now. Glad this tip was of some use to you. :D

    Your sidebar looks neater than what I imagine it was before hand (Your blog has been online for quite a while. Congrats! :D ). I think it also draws more attention to your category list above, because people aren't distracted by the months. :)

  13. Des Walsh
    August 27th at 7:22 am GMT
    Comment #13

    Just what I've been looking for and was getting resigned to not being able to find a solution so easy to implement. With a blog that's been going since 2004 the list of archives was a real pain. I've dropped them completely from the sidebar and have the dropdown in the footer. Now about to tackle the categories (which are much too numerous but culling them is a job for another day). Many thanks.

  14. Michael Martin
    August 27th at 12:10 pm GMT
    Comment #14

    Hi Des Walsh,

    The dropdown looks good in your footer. It seems to fit in very neatly. Good idea. :)

    As for the categories, this post involves a different drop-down technique that might help you with them. Perhaps that would work?

  15. Anica
    January 5th at 10:11 am GMT
    Comment #15

    Thanks, I was looking for something just like this ;D

  16. Michael Martin
    January 12th at 12:22 pm GMT
    Comment #16

    Welcome. :)

  17. Supa
    March 19th at 10:46 pm GMT
    Comment #17

    Thanks for the tip Michael. But I have a problem, the menu I want to place the dropdown archive in is of a shorter width than what's being displayed. I think two things need to be adjusted in the code for it to fit and I was wondering if you know what the correct code bits are and where to put them in the code you show above?
    1. The maximum width size for the dropdown menu can only be 100 pixels.
    2. The font size should probably be half of what it is on standard, so the month names won't stretch the dropdown menu.
    It's either one or the other, or both, any help you can give would be much appreciated!

  18. Michael Martin
    March 19th at 11:39 pm GMT
    Comment #18

    Supa,
    Do you know CSS? You can use that to style how the drop-down looks.

    e.g. Change the "<select name="archive-dropdown"

    part to:

    <select style="width:100px;font-size:11px;" name="archive-dropdown"

  19. Jayce
    April 6th at 3:59 am GMT
    Comment #19

    Thanks for the codes. It works fine on my site. :)

  20. Supa
    April 7th at 1:36 pm GMT
    Comment #20

    Hi Michael, thanks so much for that, it worked perfectly! Although I didn't have to add it to the style.css but instead I could add it to the .php page with the dropdown archive code you provided. Thanks again! :D

  21. SDK
    May 12th at 7:03 pm GMT
    Comment #21

    is there a way to show both months and years (depending on the year) in the drop down?

    say i wanna only show months for 2008 and just year links for years 2007/2006...

    is that possible?

    thanks!

Leave a Reply