Every piece of content you create deserves to be found, even months or years later. If your WordPress archives are merely a basic list hidden in your sidebar, you’re making it difficult for visitors to discover and enjoy your older posts.
Your archives can be much more than just a simple chronological list.
They can direct readers to topics they are interested in, highlight your most popular content, and even encourage visitors to spend more time exploring your site.
We know this from experience at CanadaCreate, where we have a dedicated archives page. We’ve seen how an effective archive can significantly enhance content discovery.
Are you ready to enhance your archives? We’ll guide you through customizing your WordPress archive display with easy techniques that require no technical expertise.
Why Should You Customize the Display of WordPress Archives in Your Sidebar?
WordPress archives automatically categorize your posts by date, making it simple for visitors to locate older content.
Many website owners add a sidebar to their WordPress site and include an archives widget in this section for easy access to previous posts.
The default archive display in your sidebar can be lengthy and user-unfriendly, particularly for websites with a lot of content. A simple list of months and years may quickly become overwhelming and unattractive to visitors.
By personalizing the sidebar archives on your WordPress site, you can avoid a lengthy and daunting archive list.
An effectively designed archive section can enhance user experience, encouraging visitors to delve deeper into your content.
Now, let’s explore how to customize the display of WordPress archives in your sidebar:
- Option 1: Customize the Default Archives Block Without a Plugin
- Option 2: Create a Compact Archive Display
- Option 3: Show Archives in a Collapsible Menu
- Option 4: Limit the Number of Archive Months Shown
- Option 5: Offer Monthly and Yearly Archive Dropdown Menus
- Option 6: Present Monthly Archives Organized by Year
Option 1: Customize the Default Archives Block Without a Plugin
The standard WordPress archives block or widget includes options for customizing its appearance.
If you are using a classic theme, you can access these settings by navigating toAppearance »Widgetsto access the block-based widget editor.
Next, click the ‘+’ icon to insert the ‘Archives’ block into your WordPress sidebar.
In the right panel of block settings, you will find options to display the archives as a dropdown menu, include an archives label, and show the number of posts published during each timeframe.
You can also choose to display the archives by year, month, week, or day.
Once you are satisfied with the appearance of the archives on your WordPress blog, click ‘Update.’
Here is how the default WordPress archives appear on your blog sidebar after customization:
If you are using a block theme, you can simply add the same ‘Archives’ block to the template that features a sidebar in the full-site editor. The settings remain unchanged.
For more details, you can refer to our comprehensive guide on WordPress full site editing.
While these default settings may work for a basic blog, they may fall short if you have a large amount of content to manage or if you desire additional customization options.
If you are interested in exploring more ways to enhance the archives display, continue reading.
Option 2: Create a Compact Archives Display
If your archive list has become too lengthy, you can create a compact archive that showcases your posts while taking up significantly less space.
You will need to install and activate the Compact Archives plugin, which we developed and has been successfully used by over 2,000 users.
For detailed installation instructions, refer to our comprehensive guide on how to install a WordPress plugin.
After activating the plugin, you can add the compact archives to your theme’s sidebar using the ‘CanadaCreate’s Compact Archives’ block, available in both the block-based widget editor and the full-site editor.
You can customize the appearance of the compact archives to suit your preferences.
For instance, you can choose to display the first initials of the month, the first letter of the month, or the month’s numerical representation.
Once you have made your changes, simply click ‘Update’ or ‘Save.’
For more information about the plugin, check out our guide on how to create compact archives in WordPress.
Option 3: Present Archives in a Collapsible Menu
Another effective method for managing lengthy archive lists is to present a collapsible outline of the years and months when you published your blog posts.
To implement this, you will need to install and activate the Collapsing Archives plugin.
Once the plugin is activated, you should navigate to the Navigate to Appearance » WidgetsSelect the ‘Collapsing Archives’ widget and add it to your sidebar.
In the settings sidebar for the block, you can opt to display the number of posts from each year or month, automatically expand the collapsible menus, customize the icons for the collapsible menus, and more.
For additional information, refer to Method 1 in our guide on limiting the number of archive months shown in WordPress.
Once you are satisfied with the archive display, click ‘Update’ or ‘Save.’
Here’s a preview of how it appears on our demo site:
Option 4: Limit the Display of Archive Months
You might prefer the default WordPress archive layout. However, if you have a large amount of content, displaying every month or year can make your sidebar excessively long. You can resolve this by limiting the number of months shown in your archives.
To achieve this, you will need to add custom code to your WordPress theme files.
If you haven’t done this before, it may seem daunting. However, you can use WPCode to do it safely.
WPCode is a plugin that simplifies the process of adding and managing custom code snippets in WordPress.
We have thoroughly tested this tool and found it to be excellent for maintaining organization. You can easily view the snippets you have added and quickly deactivate any code that is not functioning, all without needing to edit your theme files.
For additional insights into our experience, please read our WPCode review.
First, let’s install WPCode through the WordPress admin dashboard. If you need assistance, you can refer to our detailed guide on how to install a WordPress plugin.
Important Note:You can utilize the free version of WPCode for this tutorial. However, the premium version offers many advantages, including an AI code generator that assists you in creating custom code snippets without requiring technical expertise.
Next, navigate toCode Snippets » + Add Snippet.Choose ‘Add Your Custom Code (New Snippet)’ and click the ‘+ Add Custom Code’ button.
Now, assign a name to your new code snippet. It can be something straightforward like ‘Limit Archive Months Displayed.’
Then, ensure you select ‘PHP Snippet’ for the ‘Code Type.’
Now, paste the following code snippet into the Code Preview box below:
// Function to retrieve a limited list of monthly archives
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 line that reads 'limit'=>6 determines the number of months shown. Feel free to adjust it to your desired number.
Next, navigate to the Insertion section and ensure the Insert method is set to ‘Auto Insert.’ Additionally, choose ‘Frontend Only’ for the Location.
After that, simply toggle the switch at the top to activate the code and click the ‘Save Snippet’ button.
Once completed, head to your block-based widget editor or full site editor.
Then, click the ‘+’ icon and select the ‘Shortcode’ block.
Next, paste the following shortcode into the block:
[wpb_custom_archives]
After clicking the ‘Update’ or ‘Save’ button, your sidebar will show only 6 months of archives.
For more information, refer to Method 3 in our guide on limiting the number of archive months shown in WordPress.
Here’s how our archives section appears after swapping the default Archives block with the shortcode:
Option 5: Create Dropdown Menus for Monthly and Yearly Archives
Visitors may not always know the exact date a post was published or updated. To assist them, you can set up two dropdown menus in your archives section: one for years and another for months.
This design feature in WordPress helps users easily locate older content without having to scroll through an extensive list.
We will implement this using a custom code snippet and WPCode. First, ensure you have WPCode installed in your WordPress admin area.
Next, navigate toCode Snippets » + Add Snippet. Select ‘Add Your Custom Code (New Snippet)’ and click the ‘+ Add Custom Code’ button.
Now, assign a name to your new custom code snippet. A straightforward option would be ‘Monthly and Yearly Archive Dropdown Menus.’
Additionally, choose ‘PHP Snippet’ for the ‘Code Type.’
In the Code Preview box, simply insert the following code snippet:
function custom_archive_dropdown_shortcode() { // Retrieve array of months 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 = ''; // Retrieve array of years $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 = ''; $output .= $month_dropdown . $year_dropdown; // Append dropdowns to output return $output; // Return the complete output
}
add_shortcode('archive_dropdown', 'custom_archive_dropdown_shortcode');
Similar to the previous code snippet, navigate to the Insertion section and select ‘Auto Insert’ as the Insert Method. For the Location, opt for ‘Frontend Only.’
Next, activate the code snippet and click ‘Save Snippet.’
Now, access the block-based widget editor or the full-site editor.
After that, insert a ‘Shortcode’ block into your sidebar. At this point, you can paste the following shortcode into the block:
[archive_dropdown]
Once you have done that, click ‘Update’ or ‘Save.’
This will create two dropdown menus allowing users to select a month and year to find the desired content.
When users select a month or year, they will be redirected to the archive page for that specific period.
Option 6: Display Monthly Archives Organized by Year
We once worked on a site design that required monthly archives organized by year in the sidebar.
This custom sidebar archive was challenging to code because the client requested that the year be displayed only once on the left.
We found great inspiration online and developed a custom code snippet for you. In this article, we present a simplified version of that code which you can easily implement using WPCode.
Begin by installing WPCode from your WordPress admin dashboard. Once that’s done, navigate to Code Snippets » + Add Snippet. Select ‘Add Your Custom Code (New Snippet)’ and click on the ‘+ Add Custom Code’ button.
Next, assign a name to your new custom code snippet. A simple name like ‘Custom Archives’ works well.
Make sure to choose ‘PHP Snippet’ as the ‘Code Type.’
In the Code Preview box, simply paste 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 .= '| ‘ . $year . ‘ | ‘; $output .= implode( ”, $archives_for_year ); $output .= ‘ |
‘; return $output;
}
As demonstrated in Method 5, scroll down to the Insertion section and choose ‘Auto Insert’ for the Insert Method. You can select ‘Frontend Only’ for the Location.
Next, activate the code snippet and click ‘Save Snippet.’
Let’s create another custom code snippet. This time, the snippet will be used to style the archives widget area using CSS.
You can name this snippet ‘Custom CSS for Archives’ and select ‘CSS Snippet’ as the Code Type.
Now, insert 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 completed, scroll down to the Insertion section and select ‘Auto Insert’ for the Insert Method. Then, choose ‘Site Wide Header’ for the Location.
After that, activate the code and click ‘Save Snippet.’
Let’s navigate to the widget editor or the full site editor.
To get started, click the ‘+’ button and choose the ‘Shortcode’ block. Then, paste the following shortcode into the block:
[custom_archives]
After that, click ‘Update’ or ‘Save’ to apply your changes.
You’re all set!
Here’s how our archives display appears on our demo site:
Explore More Tips and Tricks for Your WordPress Blog
Looking to enhance your WordPress blog archives or redesign your sidebar? Check out these helpful guides:
- How to Create a Custom Sidebar, Header, or Footer for Each Category
- How to Build a Custom Post Types Archive Page in WordPress
- Beginner’s Guide to Developing a Custom Archives Page in WordPress
- How to Adjust the Sidebar Position in WordPress
- WordPress Sidebar Strategies for Optimal Results
- How to Incorporate an Image in a WordPress Sidebar Widget
We hope this tutorial has helped you learn how to customize the display of WordPress archives in your sidebar. You might also want to explore our comprehensive guide on editing a WordPress website, as well as our expert recommendations for the best WordPress drag-and-drop page builders.
If you enjoyed this article, please subscribe to our YouTube Channel for WordPress video tutorials. You can also connect with us on Twitter and Facebook.
