How do I display the “Archives” widget layout (sidebar) in WordPress by ‘year’ then by ‘months’?

I am using the default widget in my sidebar Archive which currently displays the archive this way:

Mar 2018
Feb 2018
Jan 2018

However, I’d like it to display this way:

2018
March
February
January

2017
December
November
October

Where the months are links. How do I achieve that? What do I do to my sidebar.php file?

Changing the default widget would be pretty complicated.

However, you can write your own shortcode and function to get your desired list.

I’m guessing you want an unordered list in your widget?

Put this in your theme’s functions.php:

add_shortcode('archive_by_year_and_month','get_archive_by_year_and_month');

function get_archive_by_year_and_month($atts=array()){
    global $wpdb;
    $years = $wpdb->get_col("SELECT DISTINCT YEAR(post_date) FROM $wpdb->posts WHERE post_type="post" AND post_status="publish" ORDER BY post_date DESC");
    if($years){
        $rueckgabe="<ul>";
        foreach($years as $year){
            $rueckgabe.='<li class="jahr"><a href="'.get_year_link($year).'">'.$year.'</a>';
            $rueckgabe.='<ul class="monthlist">';
            $months = $wpdb->get_col($wpdb->prepare("SELECT DISTINCT MONTH(post_date) FROM $wpdb->posts WHERE post_type="post" AND post_status="publish" AND YEAR(post_date) = %d ORDER BY post_date ASC",$year));
            foreach($months as $month){
                $dateObj   = DateTime::createFromFormat('!m', $month);
                $monthName = $dateObj->format('F'); 
                $rueckgabe.='<li class="month"><a href="'.get_month_link($year,$month).'">'.$monthName.'</a></li>';
            }
            $rueckgabe.='</ul>';
            $rueckgabe.='</li>';
        }
        $rueckgabe.='</ul>';
    }
    return $rueckgabe;
}

Then put a Text-Widget into your sidebar and enter the shortcode:

[archive_by_year_and_month]

Hit save and voila: You should get your list as you desired.

Happy Coding!