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:

  <?php  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.

Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.