Here at WPBeginner, we have our own dedicated archives page. But for many WordPress sites, you don’t need a whole page. Sometimes a well-organized archives section in your sidebar is all you need to help readers find your older content.
The challenge is that the default WordPress archive display can look messy and overwhelming in your sidebar. When that happens, visitors are less likely to click through and explore your older posts.
We’ve tested many different archive layouts over the years, and we know exactly what makes readers want to explore more. A well-organized archives section can keep visitors on your site longer and help them find exactly what they’re looking for.
In this guide, we’ll show you several proven ways to customize your WordPress archives display. Whether you want a clean dropdown menu or a year-by-year view, we’ll show you how to set it up step by step.
WordPress archives automatically organize your posts by date, making it easy for visitors to find older content.
Many site owners add a sidebar to their WordPress site and include an archives widget in this area for quick access to past posts.
However, the default archives display in your sidebar can often be too long and not very user-friendly, especially for sites with extensive content. A basic list of months and years can quickly become overwhelming and unappealing to users.
By customizing your sidebar archives on your WordPress site, you can prevent the archive list from becoming too lengthy and intimidating.
A well-designed archive section can also improve the user experience, encouraging visitors to explore more of your content.
With that in mind, let’s see how you can customize the display of WordPress archives in your sidebar:
Option 1: Customize the Default Archives Block (No Plugin)
The default WordPress archives block or widget actually comes with options to customize how the archives look.
If you use a classic theme, you can see these settings by going to Appearance » Widgets to open the block-based widget editor.
Then, click the ‘+’ button to add the ‘Archives’ block in the sidebar in WordPress.
In the right block settings panel, you will see options to display the archives as a dropdown menu, show the archives label, and show the number of posts published in each period.
You can also have the archives displayed by year, month, week, or day.
Once you’re happy with how the archives look on your WordPress blog, then you can click ‘Update.’
Here is what default WordPress archives look like on your blog sidebar when you customize it:
If you use a block theme, then you can just use the same ‘Archives’ block and add it to the template that has a sidebar in the full-site editor. The settings are exactly the same.
You can read our complete guide to WordPress full site editing for more information.
These default settings may be good for a basic blog. However, they are not enough if you have lots of content to manage or you want more customization options.
If you’re looking for more ways to customize the archives display, then keep reading.
Option 2: Create a Compact Archives Display
If your archives list has become too long, then you can create a compact archive that displays your posts using much less space.
You’ll need to install and activate the Compact Archives plugin. We developed this plugin ourselves, and it has worked well for over 2,000 users.
For more installation instructions, see our step-by-step guide on how to install a WordPress plugin.
Once the plugin is active, you can add the compact archives to your theme’s sidebar using the ‘WPBeginner’s Compact Archives’ block. This block is available in both the block-based widget editor and the full-site editor.
You can then change what the compact archives look like.
For example, you could choose to display the first initials of the month, the first letter of the month, or the month’s number.
Once done, just click ‘Update’ or ‘Save.’
For more details about the plugin, head to our guide on how to create compact archives in WordPress.
Option 3: Display Archives in a Collapsible Menu
Another way to deal with long archive lists is to display a collapsible outline of the years and months when you published blog posts.
To do this, you need to install and activate the Collapsing Archives plugin.
Once the plugin is active, you need to visit the Appearance » Widgets page and add the ‘Collapsing Archives’ widget to your sidebar.
In the block settings sidebar, you can choose to show the number of posts published in the year or month, automatically expand the collapsible menus, change the collapsible menu icons, and more.
You can learn more by referring to Method 1 in our guide on how to limit the number of archive months displayed in WordPress.
Once you’re happy with how the archives are displayed, click ‘Update’ or ‘Save.’
Here’s how it looks on our demo website:
Option 4: Limit the Number of Archive Months Displayed
Maybe you like the look of the default WordPress archives. But if you have tons of content, showing every month or year can make your sidebar too long. You can fix this by limiting the number of months that appear in your archives list.
To do that, you’ll have to add custom code to your WordPress theme’s files.
If you haven’t done this before, this may seem intimidating. But don’t worry, as you can use WPCode to do it safely.
WPCode is a code snippet plugin that makes it easy to add and manage custom code snippets in WordPress. This way, you can track what code you’ve added to WordPress and deactivate it in a few clicks if the code doesn’t work.
You can use the free version of WPCode for this tutorial. That being said, the premium version comes with lots of perks, like an AI code generator to help you come up with custom code snippets with no technical knowledge.
You can check out our WPCode review for more information.
First, let’s install WPCode in the WordPress admin dashboard. You can check out our step-by-step guide on how to install a WordPress plugin if you need some guidance.
Then, go to Code Snippets » + Add Snippet. Select ‘Add Your Custom Code (New Snippet)’ and click the ‘+ Add Custom Code’ button.
Now, give your new code snippet a name. It can be something simple like ‘Limit Archive Months Displayed.’
Then, make sure to select ‘PHP Snippet’ for the ‘Code Type.’
Go ahead and paste the following code snippet below in the Code Preview box:
// Function to get archives list with limited months
function wpb_limit_archives() {
$archive_title = ‘Archives’;
$my_archives = $archive_title . 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’);
The part that says ‘limit’=>6 controls the number of months displayed. You can change it to any number if preferred.
Now, scroll down to the Insertion section and make sure the Insert method is ‘Auto Insert.’ Also, select ‘Frontend Only’ for the Location.
After doing that, just click the toggle at the top to make the code ‘Active’ and hit the ‘Save Snippet’ button.
Once done, go to your block-based widget editor or full site editor.
Then, click the ‘+’ button and select the ‘Shortcode’ block.
After that, you should paste the following shortcode into the block:
[wpb_custom_archives]
Once you click the ‘Update’ or ‘Save’ button, your sidebar will display just 6 months of archives.
For further details, see Method 3 in our guide on how to limit the number of archive months displayed in WordPress.
Here’s what our archives section looks like after replacing the default Archives block with the shortcode:
Option 5: Display Monthly and Yearly Archive Dropdown Menus
Sometimes, visitors might not know exactly when a post was updated or published. To help them, you can create two dropdown menus in your archives section: one for years and one for months.
This WordPress design element can make it easier for users to find older content without scrolling through a long list.
We will use a custom code snippet and WPCode for this. Like before, make sure to install WPCode in your WordPress admin first.
Then, go to Code Snippets » + Add Snippet. Choose ‘Add Your Custom Code (New Snippet)’ and click the ‘+ Add Custom Code’ button.
Now, give your new custom code snippet a name. It can be something simple like ‘Monthly and Yearly Archive Dropdown Menus.’
Also, select ‘PHP Snippet’ for the ‘Code Type.’
In the Code Preview box, just insert the following code snippet:
function custom_archive_dropdown_shortcode() {
// Get months array
global $wpdb, $wp_locale;
$months = $wpdb->get_results(
“SELECT DISTINCT YEAR(post_date) AS year, MONTH(post_date) AS month
FROM $wpdb->posts
WHERE post_type = ‘post’ AND post_status = ‘publish’
ORDER BY post_date DESC”
);
$output = ‘Archives’; // Added ‘Archives’ title in H3
$month_dropdown = ”;
$month_dropdown .= ‘Select Month’;
foreach ( $months as $month ) {
$month_name = $wp_locale->get_month($month->month);
$year_month = sprintf(‘%d-%02d’, $month->year, $month->month);
$month_dropdown .= sprintf(
‘%s %d’,
esc_url(home_url(‘/’ . $month->year . ‘/’ . $month->month . ‘/’)),
$month_name,
$month->year
);
}
$month_dropdown .= ”;
// Get years array
$years = $wpdb->get_results(
“SELECT DISTINCT YEAR(post_date) AS year
FROM $wpdb->posts
WHERE post_type = ‘post’ AND post_status = ‘publish’
ORDER BY post_date DESC”
);
$year_dropdown = ”;
$year_dropdown .= ‘Select Year’;
foreach ( $years as $year ) {
$year_dropdown .= sprintf(
‘%d’,
esc_url(home_url(‘/’ . $year->year . ‘/’)),
$year->year
);
}
$year_dropdown .= ”;
$output .= $month_dropdown . $year_dropdown; // Append dropdowns to output
return $output; // Return the complete output
}
add_shortcode(‘archive_dropdown’, ‘custom_archive_dropdown_shortcode’);
Like with the previous code snippet, scroll down to the Insertion section and select ‘Auto Insert’ for the Insert Method. As for the Location, you can choose ‘Frontend Only.’
Then, simply make the code snippet active and click ‘Save Snippet.’
Now, go to the block-based widget editor or full-site editor.
After that, add a ‘Shortcode’ block to your sidebar. At this stage, you can go ahead and paste the following shortcode into the shortcode block:
[archive_dropdown]
Once you do that, just click ‘Update’ or ‘Save.’
Now, there will be 2 dropdown menus that let users choose the month and year to find the right content.
Whenever they select a month or year, the user will be redirected to the archive page of their chosen period.
Option 6: Display Monthly Archives Arranged by Year
Once, we had to work on a site design that needed monthly archives arranged by year in the sidebar.
This custom sidebar archive was difficult to code because this client only wanted to show the year once on the left.
Thankfully, we were able to find inspiration from the web and created a custom code snippet for it. For this article, we have come up with a much simpler version of that code that you can also use using WPCode.
First, install WPCode in your WordPress admin. After that, head to Code Snippets » + Add Snippet. Choose ‘Add Your Custom Code (New Snippet)’ and click the ‘+ Add Custom Code’ button.
Go ahead and give your new custom code snippet a name. It can be something simple like ‘Custom Archives.’
Also, select ‘PHP Snippet’ for the ‘Code Type.’
In the Code Preview box, just insert the following code snippet:
add_shortcode( ‘custom_archives’, ‘display_custom_archives’ );
function display_custom_archives() {
$archives = wp_get_archives( array(
‘type’ => ‘monthly’,
‘format’ => ‘custom’,
‘before’ => ”,
‘after’ => ”,
‘echo’ => false,
) );
// Split the archives by year
$archives_by_year = array();
foreach ( explode( ”, $archives ) as $archive_item ) {
if ( empty( $archive_item ) ) {
continue;
}
// Extract year from the archive link
preg_match( ‘//(d{4})//’, $archive_item, $matches );
$year = isset( $matches[1] ) ? $matches[1] : date( ‘Y’ );
// Add to the year array
$archives_by_year[ $year ][] = $archive_item;
}
// Build the output
$output = ‘Archives’;
$output .= ”;
$output .= ”;
foreach ( $archives_by_year as $year => $archives_for_year ) {
$output .= ”;
$output .= ” . $year . ”;
$output .= ”;
$output .= implode( ”, $archives_for_year );
$output .= ”;
$output .= ”;
}
$output .= ”;
return $output;
}
As shown in Method 5, you can now scroll down to the Insertion section and select ‘Auto Insert’ for the Insert Method. You can choose ‘Frontend Only’ for the Location.
Now, make the code snippet active and click ‘Save Snippet.’
Let’s create a new custom code snippet again. This time, the code snippet is to style the archives widget area using CSS.
You can name this code snippet ‘Custom CSS for Archives’ and select ‘CSS Snippet’ for the Code Type.
Now, paste the following code snippet into the Code Preview box:
.archives-title {
/* Style the title */
}
table {
width: 100%;
border-collapse: collapse;
}
td {
padding: 5px;
vertical-align: top;
}
.year {
font-weight: bold;
}
.months hr {
margin: 5px 0;
border: none;
border-top: 1px solid #ccc;
}
Once done, just scroll down to the Insertion section and select ‘Auto Insert’ for the Insert Method. Then, choose ‘Site Wide Header’ for the Location.
After that, just make the code active and click ‘Save Snippet.’
Let’s go to the widget editor or full site editor.
Here, click the ‘+’ button and select the ‘Shortcode’ block. Now, go ahead and paste the following shortcode into the shortcode block:
[custom_archives]
Then, click ‘Update’ or ‘Save.’
That’s it!
This is what our archives display looks like on our demo website:
Discover More WordPress Blog Tips and Tricks
Want to improve your WordPress blog archives further? Or maybe redesign your sidebar? Check out these related guides below:
We hope this tutorial helped you learn how to customize the display of WordPress archives in your sidebar. You may also want to check out our ultimate guide on how to edit a WordPress website and our expert picks of the best WordPress drag-and-drop page builders.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
