How to Customize the Display of WordPress Archives in Your Sidebar

Do you want to change the way your WordPress archives appear in the sidebar?
The WordPress archives widget comes with few modification options. You might prefer that your post archives take up less space, display more information, or have more appealing look.
We’ll teach you how to alter the appearance of WordPress archives in your sidebar in this article.

How to Change the Way WordPress Archives Are Displayed in Your Sidebar

Why Should You Change the Way WordPress Archives Are Displayed in Your Sidebar?

The archives widget that comes with your WordPress website allows you to display monthly blog post archive links in sidebar.
The widget offers two customization options: the archive list can be displayed as dropdown menu, and the post counts for each month can be displayed.

The WordPress Archives Widget by default

You may, however, want to show your sidebar archive list in different way. 
The default list, for example, may become too long as your site expands, or you may want to make it easier for your visitors to navigate.

Compact Archive Creation

If your archives list has grown too big, you can build compact archive that shows your content in smaller format.
The Compact Archives plugindeveloped and maintained by the WPBeginner team, must be installed and activated. See our step-by-step guide on installing WordPress plugin for more information.
You can use the ‘WPBeginner’s Compact Archives’ block to add the compact archives to post, page, or widget after they’ve been activated.

Plugin for Compact Archives

By being a little wider, the compact archives list saves vertical space. As a result, it might be better suited to a footer or archives page than than a sidebar.

The plugin is, however, highly adjustable, and you can make it narrower by showing only the first initial or a number for each month. More information on how to make compact archives in WordPress may be found in our guide.

Using a Collapsible Outline to Display Archives

Displaying a collapsible outline of the years and months that you wrote blog content is another method to deal with big archives listings.

The Collapsing Archives plugin must be installed and activated in order to accomplish this. You must go to Appearance » Widgets and add the ‘Compact Archives‘ widget to your sidebar after activation.

The Plugin for Collapsing Archives

The Collapsing Archives widget collapses your archive by year using JavaScript. Your users can extend years to see monthly archives by clicking on them. You may also make monthly archives collapsible so that users can view the names of the posts beneath them.

On our sample website, this is how it looks.

A Sneak Peek at a Collapsing Archive

Setting a Limit on the Number of Archive Months Shown

Limiting the number of months displayed to, say, the latest six months is a third technique to keep your archives list from being too big.

You’ll need to add code to your WordPress theme’s files to accomplish this. See our article on how to copy and paste code in WordPress if you haven’t done it before.

Add the following code snippet to your functions.php file, a site-specific plugin, or a code snippets plugin as the initial step.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Function to get archives list with limited months
function wpb_limit_archives() {
 
$my_archives = wp_get_archives(array(
    'type'=>'monthly',
    'limit'=>6,
    'echo'=>0
));
     
return $my_archives;
 
}
 
// Create a shortcode
add_shortcode('wpb_custom_archives', 'wpb_limit_archives');
 
// Enable shortcode execution in text widget
add_filter('widget_text', 'do_shortcode');

Edit the number on line 6 to adjust the number of months displayed. If you modify the number to ’12,’ for example, it will show 12 months of archives.

You may now add a ‘Custom HTML’ widget to your sidebar by going to Appearance » Widgets. Then, in the widget box, copy and paste the following code:

1
2
3
<ul>
[wpb_custom_archives]
</ul>
 
Adding a Custom HTML Widget using Shortcode
Your sidebar will only show six months of archives after you click the ‘Update’ button.

Archives are listed on a daily, weekly, monthly, or annual basis.

The Annual Archive plugin will provide you greater control over how your archives are displayed. It allows you to organize your archives by decade and list them daily, weekly, monthly, annually, or alphabetically.

Install and activate the Annual Archive plugin to get started. The Annual Archive widget can then be dragged to your sidebar from the Appearance » Widgets page.

The Annual Archive Plugin is a plug-in that allows you to keep track of

You can choose whether to display a list of days, weeks, months, years, decades, or posts after giving the widget a title. You can limit the amount of archives displayed, choose a sort option, and add additional text by scrolling down to other options.

If you go to Settings » Annual Archive, you may use custom CSS to further modify the archive list.

Monthly Archives are organized by year.

We were once working on a site design for a client who needed monthly archives organized by year in the sidebar. Because this client only wanted to show the year once on the left, it was challenging to code.

Monthly Archives are organized by year.

Andrew Appleton was able to tweak some code for us. Because Andrew’s code lacked a limit option for the archives, the list displayed all archive months. We included a limit parameter that limited the number of months displayed to only 18 at any given moment.

To show custom WordPress archives, insert the following code into your theme’s sidebar.php file or any other file where you wish to display them:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?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; ?>

You must adjust line 19 where the current $limit value is set to 18 if you want to change the number of months displayed.

You can also display the number of posts in each month by inserting the following code between lines 12–16 of the above code:

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

To show the archive list correctly on your website, you’ll need to apply custom CSS. On our client’s website, we used CSS that looked like this:

1
2
3
4
5
6
.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;}

We hope this lesson showed you how to alter the way WordPress archives are displayed in your sidebar.