Здравствуйте, сегодня будем изменять стандартную тему wordpress – Twenty Twelve, а именно: создадим в ней еще один сайдбар слева к уже имеющемуся сайдбару справа – в итоге у нас получиться тема Twenty Twelve с 2 сайдбарами слева и справа.

Скачать исходники для статьи можно ниже

PS: Статья в процессе написания…

1. Зарегистрируем новый сайдбар в теме Twenty Twelve, а для этого нам нужно перейти в файл functions.php (пункт “Внешний вид” – подпункт “Редактор” – справа в списке шаблонов находим файл functions.php) и вставить следующий код:

// Register extra sidebar
function mytheme_widgets_init() {
	register_sidebar( array(
		'name' => __( 'Extra Sidebar', 'tto' ),
		'id' => 'sidebar-4',
		'description' => __( 'The Left Sidebar. Displayed on all but full width and homepage template.', 'mytheme' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => "</aside>",
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

2. Добавляем созданный нами сайдбар в шаблон темы Twenty Twelve, а для этого переходим в файл sidebar.php (пункт “Внешний вид” – подпункт “Редактор” – справа в списке шаблонов находим файл sidebar.php) и вставить следующий код, который должен располагаться над кодом правого сайдбара:

<?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
	<div id="extra-sidebar" class="widget-area" role="complementary">
		<?php dynamic_sidebar( 'sidebar-4' ); ?>
	</div><!-- .extra-sidebar .widget-area -->
<?php endif; // end extra sidebar widget area ?>

3. Изменяем ширину темы Twenty Twelve, а для этого опять заходим в файл functiond.php и вставляем код:

// Override content width (for photo and video embeds)
$content_width = 500;

// Display 1000px width content if full width page template
function mytheme_content_width() {
	if ( is_page_template( 'page-templates/full-width.php' ) || is_attachment() ) {
		global $content_width;
		$content_width = 1000;
	}
}
add_action( 'template_redirect', 'mytheme_content_width', 11 );

здесь же добавляем еще один код, который изменяет размеры миниатюр^

// Change default thumbnail size
function mytheme_twentytwelve_setup() {
	set_post_thumbnail_size( 500, 9999 ); // (default featured images)Unlimited height, soft crop

}
add_action( 'after_setup_theme', 'mytheme_twentytwelve_setup', 11 );

4. Добавляем еще кода в файл functions.php

// Add child theme body class
function mytheme_body_class( $classes ) {
		  
	 if( ! is_page_template() )
          $classes[] = 'custom-layout';
		  
	return $classes;
}
add_filter( 'body_class', 'mytheme_body_class' );

5. Теперь переходим к форматированию стилей темы Twenty Twelve, а для этого переходим в файл style.css (пункт “Внешний вид” – подпункт “Редактор” – справа в списке шаблонов находим файл style.css) и вставить следующий код:

/* Increase theme width to 1000px */
@media screen and (min-width: 960px) { 
    .site {
        max-width: 1000px;
        max-width: 71.4285rem;
    }
}
.ie .site { max-width: 1000px; }

footer[role="contentinfo"] {
    max-width: 1000px;
    max-width: 71.4285rem;
}

здесь же добавляем следующий код:

/* Left & Right Sidebars */
@media screen and (min-width: 600px) { 
    .custom-layout .site-content {
        width: 50%;
        margin-left: 25%;
    }
    .custom-layout .widget-area {
        position: relative;
        width: 20%;
    }
    .custom-layout #extra-sidebar {
        float: left;
        margin-left: -75%;
        width: 20%;
    }

}

а также для браузера IE добавляем еще код:

/* IE8 and IE7 - Left and Right Sidebars */
.ie  .custom-layout .site-content {
    width: 50%;
    margin-left: 25%;
}
.ie .custom-layout .widget-area {
    float: right;
    width: 20%;
    position: relative;
}
.ie .custom-layout #extra-sidebar {
    float: left;
    margin-left: -75%;
    width: 20%;
}

Все готово!