Twenty Fourteen: change to just one footer widget area and use Masonry JS to display the widgets in columns. Props Frank Klein, closes #24874.

Built from https://develop.svn.wordpress.org/trunk@25065


git-svn-id: http://core.svn.wordpress.org/trunk@25051 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-content/themes/twentyfourteen/footer.php

@@ -11,12 +11,14 @@
 
 		</div><!-- #main -->
 
-		<?php get_sidebar( 'footer' ); ?>
 
 		<footer id="colophon" class="site-footer" role="contentinfo">
+
+			<?php get_sidebar( 'footer' ); ?>
+
 			<div class="site-info">
 				<?php do_action( 'twentyfourteen_credits' ); ?>
-				<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentythirteen' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentythirteen' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentythirteen' ), 'WordPress' ); ?></a>
+				<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyfourteen' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentyfourteen' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyfourteen' ), 'WordPress' ); ?></a>
 			</div><!-- .site-info -->
 		</footer><!-- #colophon -->
 	</div><!-- #page -->

wp-content/themes/twentyfourteen/functions.php

@@ -142,45 +142,13 @@ function twentyfourteen_widgets_init() {
 		'after_title' => '</h1>',
 	) );
 	register_sidebar( array(
-		'name' => __( 'Footer Widget Area One', 'twentyfourteen' ),
+		'name' => __( 'Footer Widget Area', 'twentyfourteen' ),
 		'id' => 'sidebar-3',
 		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
 		'after_widget' => '</aside>',
 		'before_title' => '<h1 class="widget-title">',
 		'after_title' => '</h1>',
 	) );
-	register_sidebar( array(
-		'name' => __( 'Footer Widget Area Two', 'twentyfourteen' ),
-		'id' => 'sidebar-4',
-		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
-		'after_widget' => '</aside>',
-		'before_title' => '<h1 class="widget-title">',
-		'after_title' => '</h1>',
-	) );
-	register_sidebar( array(
-		'name' => __( 'Footer Widget Area Three', 'twentyfourteen' ),
-		'id' => 'sidebar-5',
-		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
-		'after_widget' => '</aside>',
-		'before_title' => '<h1 class="widget-title">',
-		'after_title' => '</h1>',
-	) );
-	register_sidebar( array(
-		'name' => __( 'Footer Widget Area Four', 'twentyfourteen' ),
-		'id' => 'sidebar-6',
-		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
-		'after_widget' => '</aside>',
-		'before_title' => '<h1 class="widget-title">',
-		'after_title' => '</h1>',
-	) );
-	register_sidebar( array(
-		'name' => __( 'Footer Widget Area Five', 'twentyfourteen' ),
-		'id' => 'sidebar-7',
-		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
-		'after_widget' => '</aside>',
-		'before_title' => '<h1 class="widget-title">',
-		'after_title' => '</h1>',
-	) );
 }
 add_action( 'widgets_init', 'twentyfourteen_widgets_init' );
 
@@ -213,6 +181,9 @@ function twentyfourteen_scripts() {
 	if ( is_singular() && wp_attachment_is_image() )
 		wp_enqueue_script( 'twentyfourteen-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20130402' );
 
+	if ( is_active_sidebar( 'sidebar-3' ) )
+		wp_enqueue_script( 'jquery-masonry' );
+
 	wp_enqueue_script( 'twentyfourteen-theme', get_template_directory_uri() . '/js/theme.js', array( 'jquery' ), '20130820', true );
 }
 add_action( 'wp_enqueue_scripts', 'twentyfourteen_scripts' );
@@ -330,52 +301,6 @@ function twentyfourteen_the_attached_image() {
 }
 endif;
 
-/**
- * Count the number of footer sidebars to enable dynamic classes for the footer
- *
- */
-function twentyfourteen_footer_sidebar_class() {
-	$count = 0;
-
-	if ( is_active_sidebar( 'sidebar-3' ) )
-		$count++;
-
-	if ( is_active_sidebar( 'sidebar-4' ) )
-		$count++;
-
-	if ( is_active_sidebar( 'sidebar-5' ) )
-		$count++;
-
-	if ( is_active_sidebar( 'sidebar-6' ) )
-		$count++;
-
-	if ( is_active_sidebar( 'sidebar-7' ) )
-		$count++;
-
-	$class = '';
-
-	switch ( $count ) {
-		case '1':
-			$class = 'one';
-			break;
-		case '2':
-			$class = 'two';
-			break;
-		case '3':
-			$class = 'three';
-			break;
-		case '4':
-			$class = 'four';
-			break;
-		case '5':
-			$class = 'five';
-			break;
-	}
-
-	if ( $class )
-		printf( 'class="%s"', $class );
-}
-
 /**
  * Gets recent formatted posts that are not featured in FC plugin.
  *

wp-content/themes/twentyfourteen/js/theme.js

@@ -125,6 +125,17 @@
 			}
 		} );
 
+		// Arranges footer widgets vertically.
+		if ( $.isFunction( $.fn.masonry ) ) {
+
+			$( '#footer-sidebar' ).masonry( {
+				itemSelector: '.widget',
+				columnWidth: 225,
+				gutterWidth: 27,
+				isRTL: $( 'body' ).is( '.rtl' )
+			} );
+		}
+
 	} );
 
 } )( jQuery );

wp-content/themes/twentyfourteen/sidebar-footer.php

@@ -1,47 +1,21 @@
 <?php
 /**
- * The Sidebar containing the main widget areas.
+ * The Sidebar containing the main widget area.
  *
  * @package WordPress
  * @subpackage Twenty_Fourteen
  */
 ?>
 <?php
-	if (   ! is_active_sidebar( 'sidebar-3' )
+if (   ! is_active_sidebar( 'sidebar-3' ) )
-		&& ! is_active_sidebar( 'sidebar-4' )
-		&& ! is_active_sidebar( 'sidebar-5' )
-		&& ! is_active_sidebar( 'sidebar-6' )
-		&& ! is_active_sidebar( 'sidebar-7' )
-	)
 	return;
 ?>
-<div id="supplementary" <?php twentyfourteen_footer_sidebar_class(); ?>>
+<div id="supplementary">
+
 	<?php if ( is_active_sidebar( 'sidebar-3' ) ) : ?>
-	<div id="footer-sidebar-one" class="widget-area" role="complementary">
+	<div id="footer-sidebar" class="widget-area" role="complementary">
 		<?php dynamic_sidebar( 'sidebar-3' ); ?>
-	</div><!-- #first .widget-area -->
+	</div><!-- #footer-sidebar -->
 	<?php endif; ?>
 
-	<?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
-	<div id="footer-sidebar-two" class="widget-area" role="complementary">
-		<?php dynamic_sidebar( 'sidebar-4' ); ?>
-	</div><!-- #second .widget-area -->
-	<?php endif; ?>
-
-	<?php if ( is_active_sidebar( 'sidebar-5' ) ) : ?>
-	<div id="footer-sidebar-three" class="widget-area" role="complementary">
-		<?php dynamic_sidebar( 'sidebar-5' ); ?>
-	</div><!-- #third .widget-area -->
-	<?php endif; ?>
-
-	<?php if ( is_active_sidebar( 'sidebar-6' ) ) : ?>
-	<div id="footer-sidebar-four" class="widget-area" role="complementary">
-		<?php dynamic_sidebar( 'sidebar-6' ); ?>
-	</div><!-- #fourth .widget-area -->
-	<?php endif; ?>
-	<?php if ( is_active_sidebar( 'sidebar-7' ) ) : ?>
-	<div id="footer-sidebar-five" class="widget-area" role="complementary">
-		<?php dynamic_sidebar( 'sidebar-7' ); ?>
-	</div><!-- #fourth .widget-area -->
-	<?php endif; ?>
 </div><!-- #supplementary -->

wp-content/themes/twentyfourteen/style.css

@@ -2339,10 +2339,15 @@ span > object {
 /* =Footer Sidebar
 ----------------------------------------------- */
 
-#supplementary .widget-area {
+.site-footer .widget-area {
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
+.site-footer .widget {
+	float: left;
+	padding-left: 27px;
+	width: 198px;
+}
 
 /* =Media Queries
 ----------------------------------------------- */
@@ -2996,26 +3001,7 @@ span > object {
 		padding-right: 0;
 		padding-left: 0;
 	}
-	#supplementary .widget-area {
+
-		float: left;
-		padding: 0 27px;
-		padding: 0 2.7rem;
-	}
-	#supplementary.one .widget-area {
-		width: 100%;
-	}
-	#supplementary.two .widget-area {
-		width: 50%;
-	}
-	#supplementary.three .widget-area {
-		width: 33.33333333%;
-	}
-	#supplementary.four .widget-area {
-		width: 25%;
-	}
-	#supplementary.five .widget-area {
-		width: 20%;
-	}
 }
 
 @media screen and (min-width: 1150px) {