Twenty Twelve: change homepage widget areas to use columns or multipl…

…e 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

wp-content/themes/twentytwelve/functions.php

@@ -183,16 +183,26 @@ 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">',
 		'after_title' => '</h3>',
 	) );
 
 	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.

wp-content/themes/twentytwelve/sidebar-home.php

@@ -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
  */
+
+/*
+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( 'sidebar-home' ) ) : ?>
-		<div id="secondary" class="widget-area" role="complementary">
-			<?php dynamic_sidebar( 'sidebar-home' ); ?>
-		</div><!-- #secondary .widget-area -->
-	<?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 -->

wp-content/themes/twentytwelve/style.css

@@ -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. */