WordPress: Добавить ещё одну область виджетов (widget area) в шаблон главной страницы

Добавления коснутся 3 файлов:

• functions.php
• sidebar-front.php
• style.css

register_sidebar( array(
'name' => __( 'Third Front Page Widget Area', 'my-child-theme' ),
'id' => 'sidebar-front-third',
'description' => __( 'Appears when using the optional Front Page template with a page set as Static Front Page', 'my-child-theme' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

<?php if ( is_active_sidebar( 'sidebar-front-third' ) ) : ?>
	<div class="third front-widgets">
		<?php dynamic_sidebar( 'sidebar-front-third' ); ?>
	</div><!-- .third -->
	<?php endif; ?>

Теперь css. Было 2 колонки, теперь нам надо 3 колонки. В media-queries для широких экранов - будем показывать 3 колонки в ряд, для узких - как и было все 3 области будут располагаться одна под другой. Для IE надо скопировать эти стили (без директивы @media screen and (min-width: 600px) и фигурных скобок) в css/ie.css, так как Explorer не понимает media-queries

@media screen and (min-width: 600px) { 
.template-front-page.two-sidebars .widget-area .front-widgets, 
.template-front-page .widget-area .widget:nth-child(even),
.template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets {
float: left !important;
width: 30.3% !important;
margin-left: 1.5% !important;
margin-right: 1.5% !important;
    }
.template-front-page .widget-area .widget:nth-child(odd) {
clear: none !important;
}
.template-front-page .widget-area .widget:nth-child(3n+3) {
clear: right;  
} 
}

Теперь в админке Wordpress в Appearance -> Виджеты мы должны увидеть 3-ю область и может совать туда виджеты, которые хотим показать в 3-й колонке на сайте.

Вот как выглядит - колонка с последними новостями в 3-й области: