How to Customize the Display of WordPress Archives in Your Sidebar


Do you need to customize the display of your WordPress archives in the sidebar?

The default WordPress archive widget offers limited customization. Perhaps you would like your message archive to use less space, display more information, or look more attractive.

In this article, we’ll show you how to customize the display of WordPress archives in your sidebar.

How to Customize the Display of WordPress Archives in Your Sidebar

Why customize the display of WordPress archives in your sidebar?

Your WordPress website comes with an archive widget that lets you display monthly blog archive links in a sidebar.

The widget has two customization options: you can display the list of archives as a drop-down menu and you can display the number of posts for each month.

The Default WordPress Archive Widget

However, you may want to display the list of archives in your sidebar differently. For example, as your site grows, the default list may become too long, or you may want to make it easier for your visitors to navigate.

Let’s see a few ways to customize the display of WordPress archives in your sidebar:

Creation of compact archives

If your archive list has grown too long, you can create a compact archive that displays your messages using much less space.

You will need to install and activate the Compact Archive plugin which is developed and maintained by the WPBeginner team. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you can add the Compact Archives to a post, page or widget using the ‘WPBeginner’s Compact Archives’ block.

The Compact Archive Plugin

The compact archive list saves vertical space by being a bit wider. This means it can fit better in a footer or archive page than in a sidebar.

However, the plugin is quite configurable and you can narrow it down by displaying only the first initial or a number for each month. You can learn more in our guide to creating compact archives in WordPress.

Viewing archives in a collapsible plan

Another way to manage long archive lists is to display a collapsible overview of the years and months in which you published blog posts.

To do this, you need to install and activate the Archive collapse connect. Upon activation, you must visit Appearance » Widgets page and add the “Compact Archive” widget to your sidebar.

The Archive Collapse Plugin

The Shrink Archives widget uses JavaScript to shrink your archives by year. Your users can click on the years to expand them and view the monthly archives. You can even make monthly archives collapsible and allow users to see post titles below.

You can learn more by referring to method 1 of our guide on how to limit the number of months of archives displayed in WordPress.

Here’s what it looks like on our demo site.

Glimpse of a collapsing archive

Limiting the number of months of archive displayed

A third way to prevent your archive list from getting too long is to limit the number of months displayed, for example, to the last six months.

To do this, you will need to add code to your WordPress theme files. If you haven’t already, check out our guide on how to copy and paste code in WordPress.

The first step is to add the following code snippet to your functions.php file, either in a site-specific plugin or by using a code snippets plugin.

// 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'); 

You can change the number of months displayed by editing the number on line 6. For example, if you change the number to ’12’ then it will display 12 months of archives.

You can now go to Appearance » Widgets page and add a “Custom HTML” widget to your sidebar. After that, you need to paste the following code into the widget box:

<ul>
[wpb_custom_archives]
</ul>
Add a shortcode to a custom HTML widget

Once you click the “Update” button, your sidebar will only show six months of archives.

For more details, see Method 3 in our guide on how to limit the number of archive months displayed in WordPress.

List of daily, weekly, monthly or yearly archives

If you want more control over how your archives are listed, then the Annual archive the plugin will help you. It lets you list your archives daily, weekly, monthly, yearly, or alphabetically, and can group lists by decade.

Start by installing and activating the Annual Archive plugin. After that, you can head to the Appearance » Widgets page and drag the Annual Archives widget to your sidebar.

The Annual Archive Plugin

You can give the widget a title and then choose to display a list of days, weeks, months, years, decades, or posts. You can scroll to other options to limit the number of archives displayed, choose a sorting option, and add additional text.

If you navigate to Settings » Annual Archiveyou can then further customize the archive list using custom CSS.

View monthly archives sorted by year

We were once working on a client’s site design that required a monthly archive organized by year in the sidebar. It was difficult to code because this client only wanted to display the year once on the left.

View monthly archives sorted by year

We were able to modify some code by Andrew Appleton. Andrew’s code didn’t have a limit parameter for archives, so the list would show all months of archives. We added a limit setting that allowed us to only display 18 months at any given time.

What you need to do is paste the following code in your theme 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; ?>

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

You can also display the number of posts for each month by adding this piece of code anywhere between lines 12-16 of the code above:

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

You will need to use custom CSS to correctly display the list of archives on your website. The CSS we used on our client’s website looked 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;}

We hope this tutorial helped you learn how to customize the display of WordPress archives in your sidebar. You might also want to learn how to install Google Analytics in WordPress or check out our list of proven ways to make money blogging with WordPress.

If you liked this article, subscribe to our Youtube channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Customize the Display of WordPress Archives in Your Sidebar first appeared on WPBeginner.



Leave a Comment

Your email address will not be published.