Changeset 25065

Timestamp:

08/20/2013 05:52:22 PM (8 years ago)

Author:

lancewillett

Message:

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

Location:

trunk/src/wp-content/themes/twentyfourteen

Files:

• footer.php (modified) (1 diff)
• functions.php (modified) (4 diffs)
• js/theme.js (modified) (1 diff)
• sidebar-footer.php (modified) (2 diffs)
• style.css (modified) (2 diffs)

trunk/src/wp-content/themes/twentyfourteen/footer.php

@@ -12 +12 @@
         </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 -->

trunk/src/wp-content/themes/twentyfourteen/functions.php

@@ -143 +143 @@
     ) );
     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">',
@@ -150 +150 @@
         '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 +181 @@
     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 );
@@ -332 +303 @@
 
 /**
- * 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.
  *

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

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

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

@@ -1 +1 @@
 <?php
 /**
- * The Sidebar containing the main widget areas.
+ * The Sidebar containing the main widget area.
  *
  * @package WordPress
@@ -8 +8 @@
 ?>
 <?php
-    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;
+if (   ! is_active_sidebar( 'sidebar-3' ) )
+    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 -->

trunk/src/wp-content/themes/twentyfourteen/style.css

@@ -2340 +2340 @@
 ----------------------------------------------- */
 
-#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;
 }
 
@@ -2997 +3002 @@
         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%;
-    }
+
 }