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

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!