Twenty Twelve: change homepage widget areas to use columns or multiple areas instead of one big area. Fixes #21619, props obenland.

git-svn-id: http://core.svn.wordpress.org/trunk@21555 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Lance Willett 2012-08-20 18:45:00 +00:00
parent 6de0e77fd4
commit 4ee38a3ca6
3 changed files with 65 additions and 13 deletions

View File

@ -183,7 +183,7 @@ function twentytwelve_widgets_init() {
register_sidebar( array(
'name' => __( 'Main Sidebar', 'twentytwelve' ),
'id' => 'sidebar-1',
'description' => __( 'Appears on posts and pages except the optional Homepage template, which uses its own set of widgets', 'twentytwelve' ),
'description' => __( 'Appears on posts and pages except the optional Homepage template, which has its own widgets', 'twentytwelve' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
@ -191,8 +191,18 @@ function twentytwelve_widgets_init() {
) );
register_sidebar( array(
'name' => __( 'Homepage Widgets', 'twentytwelve' ),
'id' => 'sidebar-home',
'name' => __( 'Homepage Widgets One', 'twentytwelve' ),
'id' => 'sidebar-2',
'description' => __( 'Appears when using the optional homepage template with a page set as Static Front Page', 'twentytwelve' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => __( 'Homepage Widgets Two', 'twentytwelve' ),
'id' => 'sidebar-3',
'description' => __( 'Appears when using the optional homepage template with a page set as Static Front Page', 'twentytwelve' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
@ -202,6 +212,20 @@ function twentytwelve_widgets_init() {
}
add_action( 'widgets_init', 'twentytwelve_widgets_init' );
/**
* Count the number of footer sidebars to enable dynamic classes for the footer
*
* @since Twenty Twelve 1.0
*/
function twentytwelve_homepage_sidebar_class() {
$classes = array( 'widget-area' );
if ( is_active_sidebar( 2 ) && is_active_sidebar( 3 ) )
$classes[] = 'two';
echo 'class="' . implode( ' ', $classes ) . '"';
}
if ( ! function_exists( 'twentytwelve_content_nav' ) ) :
/**
* Display navigation to next/previous pages when applicable.

View File

@ -1,17 +1,35 @@
<?php
/**
* The Sidebar containing the homepage widget area.
* The Sidebar containing the homepage widget areas.
*
* If no active widgets in this sidebar, it will be hidden completely.
* If no active widgets in either sidebar, they will be hidden completely.
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
?>
<?php if ( is_active_sidebar( 'sidebar-home' ) ) : ?>
<div id="secondary" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-home' ); ?>
</div><!-- #secondary .widget-area -->
/*
The homepage widget area is triggered if any of the areas
have widgets. So let's check that first.
If none of the sidebars have widgets, then let's bail early.
*/
if ( ! is_active_sidebar( 2 ) && ! is_active_sidebar( 3 ) )
return;
// If we get this far, we have widgets. Let do this.
?>
<div id="secondary" <?php twentytwelve_homepage_sidebar_class(); ?> role="complementary">
<?php if ( is_active_sidebar( 2 ) ) : ?>
<div class="first home-widgets">
<?php dynamic_sidebar( 'sidebar-2' ); ?>
</div><!-- .first .home-widgets -->
<?php endif; ?>
<?php if ( is_active_sidebar( 3 ) ) : ?>
<div class="second home-widgets">
<?php dynamic_sidebar( 'sidebar-3' ); ?>
</div><!-- .second .home-widgets -->
<?php endif; ?>
</div><!-- #secondary .widget-area -->

View File

@ -1433,18 +1433,28 @@ img#wpstats {
float: right;
width: 47.916666667%;
}
.page-template-homepage-php .widget-area .widget {
.page-template-homepage-php .widget-area .widget,
.page-template-homepage-php .widget-area.two .home-widgets {
float: left;
width: 51.875%;
margin-bottom: 24px;
margin-bottom: 1.714285714rem;
}
.page-template-homepage-php .widget-area .widget:nth-child(even) {
.page-template-homepage-php .widget-area .widget:nth-child(odd) {
clear: right;
}
.page-template-homepage-php .widget-area .widget:nth-child(even),
.page-template-homepage-php .widget-area.two .home-widgets + .home-widgets {
float: right;
width: 39.0625%;
margin: 0 0 24px;
margin: 0 0 1.714285714rem;
}
.page-template-homepage-php .widget-area.two .widget,
.page-template-homepage-php .widget-area.two .widget:nth-child(even) {
float: none;
width: auto;
}
}
/* Minimum width of 960 pixels. */