Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Customize the Display of WordPress Archives in Your Sidebar

Recently, we were working on a client’s site design that required us to display monthly archives arranged by year in the sidebar. It probably was really easy for their designer to mock it up in Photoshop, but it was a bit complicated to achieve in WordPress. See the image below:

Custom Archives Display in WordPress Sidebar

Now you are probably wondering why it was tricky to get it into WordPress when wp_get_archives() list the archives monthly with the year next to it? Well that is because this client only wanted to show the year once on it’s left. There is no real way to customize the styling of the wp_get_archives() function.

We looked around the web for solutions and came across nothing. This issue has to be really rare however we found that Andrew Appleton had the similar issue, and he had a fix for it. We used his codes with a small bits of modification.

Andrew’s code did not have a limit parameter for the archives. So using his codes would mean that you will show all archives month. Imagine that for a blog that is 5 years old. So we added a limit parameter which allowed us to limit the number of months displayed to 18 at any given time.

So basically what you need to do is paste the following code in your theme’s sidebar.php file or any other file where you want to display custom WordPress archives:

global $wpdb;
$limit = 0;
$year_prev = null;
$months = $wpdb->get_results("SELECT DISTINCT MONTH( post_date ) AS month ,	YEAR( post_date ) AS year, COUNT( id ) as post_count FROM $wpdb->posts WHERE post_status = 'publish' and post_date <= now( ) and post_type = 'post' GROUP BY month , year ORDER BY post_date DESC");
foreach($months as $month) :
	$year_current = $month->year;
	if ($year_current != $year_prev){
		if ($year_prev != null){?>
		<?php } ?>
	<li class="archive-year"><a href="<?php bloginfo('url') ?>/<?php echo $month->year; ?>/"><?php echo $month->year; ?></a></li>
	<?php } ?>
	<li><a href="<?php bloginfo('url') ?>/<?php echo $month->year; ?>/<?php echo date("m", mktime(0, 0, 0, $month->month, 1, $month->year)) ?>"><span class="archive-month"><?php echo date_i18n("F", mktime(0, 0, 0, $month->month, 1, $month->year)) ?></span></a></li>
<?php $year_prev = $year_current;

if(++$limit >= 18) { break; }

endforeach; ?>

Note: If you want to change the number of months displayed, then you need to change line 19 where the current $limit value is set to 18.

Our CSS looked a bit like this:

.widget-archive{padding: 0 0 40px 0; float: left; width: 235px;}
.widget-archive ul {margin: 0;}
.widget-archive li {margin: 0; padding: 0;}
.widget-archive li a{ border-left: 1px solid #d6d7d7; padding: 5px 0 3px 10px; margin: 0 0 0 55px; display: block;}
li.archive-year{float: left; font-family: Helvetica, Arial, san-serif; padding: 5px 0 3px 10px; color:#ed1a1c;}
li.archive-year a{color:#ed1a1c; margin: 0; border: 0px; padding: 0;}

So by doing it this way, we had the final outcome to look like this:

Custom Archives Display in WordPress Sidebar

Now if you want to show the count of posts in each month, then you would need to add this bit of code anywhere in between line 12 – 16 of the above code:

<?php echo $month->post_count; ?>

One example of what you can do with the post count and everything can be seen in the image below:

Custom WordPress Archives Display with Post Count

The above picture was taken from Andrew Appleton’s site because that was the solution he came up with from which we derived our style. If you want to see the css for his styles, then simply click on his website link above.

Do you know of an easier way of accomplishing this? Will you be customizing the display of your WordPress Archives in the next design? Please share your thoughts in the comment box below.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

44 CommentsLeave a Reply

  1. Is there a way, or a widget of some kind, under the Archives sidebar to have blog posts by title displayed under under the correlating month; versus just the month alone being present that clicks into a new page displaying all posts for that month in their entirety?

    I’m sorry if this has already been answered in the comments. I haven’t had a chance to read them.

    Thank you for any help or direction you can provide my question!

  2. Hello WPBEGINNER,

    I hope you still have a look at this older post. First many thanks for this great tutorial and code.
    I’ve managed to get

    January (2)
    February (5)

    But didn’t manage to count the posts per year. How can I do this, so that the year entry shows a number for all post for a year
    year (28) …

    Many thanks for your help!

    Best regards,

  3. Thanks so much for this code! :) it is helping me a lot.

    Any chance to extend this to a specific category? by category id?

    • It does work at all !!!

      result has nothing to do with example.

      Strange that some guys felt it useful and great.

      What is the issue ?

  4. Hi! First thing’s first! Great code! Works perfectly! Thanks!
    I was asking myself if there would be a way to edit the code in order to allow for the, say, 18-month span to move up or down according to what one is viewing? As is, you can only access the last 18 months. But perhaps there would be a way to do this so that when one opens up, for example, month 18 of the list, and the new page is opened, the archive list output by the code above sets month 18 as the middle of a new array showing, say, 9 months before and 7 after (or vice-versa).
    Perhaps my explanation is not too clear. I got the idea when viewing this website here: If you scroll down to the menu at the very bottom you will see there are several years available but only those months for the present year are displayed. When one opens up a new year, the months for that year are then displayed. Of course, this is probably another code entirely, but at least it works as a visual example of sort of what I’m talking about.

    • I use a calendar, but in addition to that modified the code to output daily archives too, it worked great. Here’s the query:

      $days = $wpdb->get_results(“SELECT DISTINCT DAY( post_date ) AS day , MONTH( post_date ) AS month , YEAR( post_date ) AS year, COUNT( id ) as post_count FROM $wpdb->posts WHERE post_status = ‘publish’ and post_date <= now( ) and post_type = 'lecture' GROUP BY day , month , year ORDER BY post_date ASC");

      <a href="/year; ?>/month, 1, $day->year)) ?>/month, $day->day, $day->year)) ?>”>month, $day->day, $day->year)) . “, ” . date_i18n(“F”, mktime(0, 0, 0, $day->month, 1, $day->year)) . ” ” . date(“j”, mktime(0, 0, 0, $day->month, $day->day, $day->year)) . “, ” . $queried_year ?>post_count . “)”; ?>
      //outputs: Thursday, August 22, 2013 (12)

      Thanks for the post by the way, it was exactly what I was looking for. The performance is surprisingly good too.

      • ok, your comment system stripped out all my `php` tags essentially rendering that code useless. Anyways, it’s possible and easy, you’ll figure it out. :)

  5. Hello,

    I like this idea. Can it also be adapted so only articles in a specific category will be in the archives and all the other categories not.

    Roelof Wobben

  6. I’ve looked everywhere for a tutorial on how to customize my archives page. I was able to get my page to produce a list of post titles and post dates, which is a great start. And now I need to figure out how to group them by month, so the page looks like this:



    This is a post title
    May 28, 2013

    And another post
    May 20, 2013

    I’m not really sure how to do this. Would you have any suggestions? I’ve noticed in the WordPress forum and elsewhere that lots of people want their archives to look like this, but they (like me) haven’t received any help.

    Thank you!

  7. Thanks for this code snipped, it has been very usefull. I only want to add a little bit change that will make the output of the month’ string in the locale language.
    On line 16 you can replace the date() function to date_i18n() function

    – echo date(“F”, mktime(0, 0, 0, $month->month, 1, $month->year))
    – echo date_i18n(“F”, mktime(0, 0, 0, $month->month, 1, $month->year))

    Thus, the function will return for the march month the string “March” in English, “Marzo” in spanish or “Març” in catalan, only to put some examples, based on the language of the site.

  8. The theme I’m using has a widget for the sidbars. The php file is written in shortcode. How would I convert this to a shortcode to put into the file? Thanks.

  9. Hey,

    I came across this, just what i was after. But it has a small problem, i have the last two months of posts october and november show in sidebar, i just added a new one in december and its not showing december in the archive list.

    Weird why its not showing the current month

  10. Is it possible to show the total years’ post_count, as well as the post_count for each month? So you’d still have each months’ post count next to each month, but also the total for the year next to the year. Using your archive image as the example, you’d have 2010 (20) and then the months as the currently display.

  11. I think I got it sorted. I moved the “break;” up into the code before it spits out the monthly … . I figured it out after looking at Appleton’s site. His code is slightly different, as you noted. I find it interesting how people can change a single bit of code and the effect is wildly different from such a small edit. To borrow from WP, “Code is Poetry” :)

    I did make one alteration which I wanted to bring to your attention. The above code did not seem to spit out the most current month. That is, my August month of this year would not appear (since we are now in August) but July showed just fine. I altered the SQL statement and now it does appear. I am not sure you want the current month, but if this is an archive perhaps even the current month is archived.

    Here is my change:

    post_date YEAR(CURDATE())

    That seems to pull the month we are currently in. I am no SQL master, so perhaps there is a reason not to do this or even a better way. However it is working for me.

    Thanks for your time on this tutorial. It definitely saved me from further bashing my head against a wall attempting to manipulate wp_get_archives().

    • hmm… seems like some code was stripped out. There should be the Greater Than symbol in there, between “post_date” and “YEAR(CURDATE())”. Let me try again and I hope it takes.

      post_date > YEAR(CURDATE())

      Sorry for the additional post, but a ‘tweak’ doesn’t change anything if the proper code does not display :)

        • Ryan –

          Weird. I posted a response on the Float Left site but it does not seem to be there. Here is the file for you to download, showing where the code is located:

          I put the code in the index.php file from my template. It is there because the client wanted it to be on every page. It only grabs the current year’s months. That is, if you went back to 2011 the months displayed would still be 2012.

          I added my code into the ‘WHERE’ line of the MySQL, replacing the code Andy had there.

          Also, I have the standard WP archive function in there as well because my client wanted to display a yearly archive as well. This is not necessary for displaying the current month.

          I hope this helps.

          – Craig

      • Ryan –

        Happy it worked for you. It took me several hours (I am not a MySQL developer) to figure that out. Now that it is helped someone else, it was worth the effort :)

        – Craig

  12. Hi, I’m using only widget, not extra plugin for archive. I limited number of months, e.g. 2 but I’m expecting to have 2 months and than the rest under “…” or “archive”. I can not find the way how to show the rest. Is here someone who knows this problem? Thanks a lot.

  13. @wpbeginner The unused months are wrapped in their own unique CSS class, so you can just do a CSS “display:none” for unused months. Then when a post appears in the month, it switches to a different class (via PHP)

  14. @sgclark That plugin sounds good… Wonder how that would work if we don’t want to show the unused months at all. But nonetheless haven’t tried it yet because it is not hosted in the repository…

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.