WordPress.org

Make WordPress Core

Changeset 25065


Ignore:
Timestamp:
08/20/2013 05:52:22 PM (7 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:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyfourteen/footer.php

    r25021 r25065  
    1212        </div><!-- #main -->
    1313
    14         <?php get_sidebar( 'footer' ); ?>
    1514
    1615        <footer id="colophon" class="site-footer" role="contentinfo">
     16
     17            <?php get_sidebar( 'footer' ); ?>
     18
    1719            <div class="site-info">
    1820                <?php do_action( 'twentyfourteen_credits' ); ?>
    19                 <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>
     21                <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>
    2022            </div><!-- .site-info -->
    2123        </footer><!-- #colophon -->
  • trunk/src/wp-content/themes/twentyfourteen/functions.php

    r25064 r25065  
    143143    ) );
    144144    register_sidebar( array(
    145         'name' => __( 'Footer Widget Area One', 'twentyfourteen' ),
     145        'name' => __( 'Footer Widget Area', 'twentyfourteen' ),
    146146        'id' => 'sidebar-3',
    147147        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
     
    150150        'after_title' => '</h1>',
    151151    ) );
    152     register_sidebar( array(
    153         'name' => __( 'Footer Widget Area Two', 'twentyfourteen' ),
    154         'id' => 'sidebar-4',
    155         'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    156         'after_widget' => '</aside>',
    157         'before_title' => '<h1 class="widget-title">',
    158         'after_title' => '</h1>',
    159     ) );
    160     register_sidebar( array(
    161         'name' => __( 'Footer Widget Area Three', 'twentyfourteen' ),
    162         'id' => 'sidebar-5',
    163         'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    164         'after_widget' => '</aside>',
    165         'before_title' => '<h1 class="widget-title">',
    166         'after_title' => '</h1>',
    167     ) );
    168     register_sidebar( array(
    169         'name' => __( 'Footer Widget Area Four', 'twentyfourteen' ),
    170         'id' => 'sidebar-6',
    171         'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    172         'after_widget' => '</aside>',
    173         'before_title' => '<h1 class="widget-title">',
    174         'after_title' => '</h1>',
    175     ) );
    176     register_sidebar( array(
    177         'name' => __( 'Footer Widget Area Five', 'twentyfourteen' ),
    178         'id' => 'sidebar-7',
    179         'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    180         'after_widget' => '</aside>',
    181         'before_title' => '<h1 class="widget-title">',
    182         'after_title' => '</h1>',
    183     ) );
    184152}
    185153add_action( 'widgets_init', 'twentyfourteen_widgets_init' );
     
    213181    if ( is_singular() && wp_attachment_is_image() )
    214182        wp_enqueue_script( 'twentyfourteen-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20130402' );
     183
     184    if ( is_active_sidebar( 'sidebar-3' ) )
     185        wp_enqueue_script( 'jquery-masonry' );
    215186
    216187    wp_enqueue_script( 'twentyfourteen-theme', get_template_directory_uri() . '/js/theme.js', array( 'jquery' ), '20130820', true );
     
    332303
    333304/**
    334  * Count the number of footer sidebars to enable dynamic classes for the footer
    335  *
    336  */
    337 function twentyfourteen_footer_sidebar_class() {
    338     $count = 0;
    339 
    340     if ( is_active_sidebar( 'sidebar-3' ) )
    341         $count++;
    342 
    343     if ( is_active_sidebar( 'sidebar-4' ) )
    344         $count++;
    345 
    346     if ( is_active_sidebar( 'sidebar-5' ) )
    347         $count++;
    348 
    349     if ( is_active_sidebar( 'sidebar-6' ) )
    350         $count++;
    351 
    352     if ( is_active_sidebar( 'sidebar-7' ) )
    353         $count++;
    354 
    355     $class = '';
    356 
    357     switch ( $count ) {
    358         case '1':
    359             $class = 'one';
    360             break;
    361         case '2':
    362             $class = 'two';
    363             break;
    364         case '3':
    365             $class = 'three';
    366             break;
    367         case '4':
    368             $class = 'four';
    369             break;
    370         case '5':
    371             $class = 'five';
    372             break;
    373     }
    374 
    375     if ( $class )
    376         printf( 'class="%s"', $class );
    377 }
    378 
    379 /**
    380305 * Gets recent formatted posts that are not featured in FC plugin.
    381306 *
  • trunk/src/wp-content/themes/twentyfourteen/js/theme.js

    r25064 r25065  
    126126        } );
    127127
     128        // Arranges footer widgets vertically.
     129        if ( $.isFunction( $.fn.masonry ) ) {
     130
     131            $( '#footer-sidebar' ).masonry( {
     132                itemSelector: '.widget',
     133                columnWidth: 225,
     134                gutterWidth: 27,
     135                isRTL: $( 'body' ).is( '.rtl' )
     136            } );
     137        }
     138
    128139    } );
    129140
  • trunk/src/wp-content/themes/twentyfourteen/sidebar-footer.php

    r24832 r25065  
    11<?php
    22/**
    3  * The Sidebar containing the main widget areas.
     3 * The Sidebar containing the main widget area.
    44 *
    55 * @package WordPress
     
    88?>
    99<?php
    10     if (   ! is_active_sidebar( 'sidebar-3' )
    11         && ! is_active_sidebar( 'sidebar-4' )
    12         && ! is_active_sidebar( 'sidebar-5' )
    13         && ! is_active_sidebar( 'sidebar-6' )
    14         && ! is_active_sidebar( 'sidebar-7' )
    15     )
    16         return;
     10if (   ! is_active_sidebar( 'sidebar-3' ) )
     11    return;
    1712?>
    18 <div id="supplementary" <?php twentyfourteen_footer_sidebar_class(); ?>>
     13<div id="supplementary">
     14
    1915    <?php if ( is_active_sidebar( 'sidebar-3' ) ) : ?>
    20     <div id="footer-sidebar-one" class="widget-area" role="complementary">
     16    <div id="footer-sidebar" class="widget-area" role="complementary">
    2117        <?php dynamic_sidebar( 'sidebar-3' ); ?>
    22     </div><!-- #first .widget-area -->
     18    </div><!-- #footer-sidebar -->
    2319    <?php endif; ?>
    2420
    25     <?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
    26     <div id="footer-sidebar-two" class="widget-area" role="complementary">
    27         <?php dynamic_sidebar( 'sidebar-4' ); ?>
    28     </div><!-- #second .widget-area -->
    29     <?php endif; ?>
    30 
    31     <?php if ( is_active_sidebar( 'sidebar-5' ) ) : ?>
    32     <div id="footer-sidebar-three" class="widget-area" role="complementary">
    33         <?php dynamic_sidebar( 'sidebar-5' ); ?>
    34     </div><!-- #third .widget-area -->
    35     <?php endif; ?>
    36 
    37     <?php if ( is_active_sidebar( 'sidebar-6' ) ) : ?>
    38     <div id="footer-sidebar-four" class="widget-area" role="complementary">
    39         <?php dynamic_sidebar( 'sidebar-6' ); ?>
    40     </div><!-- #fourth .widget-area -->
    41     <?php endif; ?>
    42     <?php if ( is_active_sidebar( 'sidebar-7' ) ) : ?>
    43     <div id="footer-sidebar-five" class="widget-area" role="complementary">
    44         <?php dynamic_sidebar( 'sidebar-7' ); ?>
    45     </div><!-- #fourth .widget-area -->
    46     <?php endif; ?>
    4721</div><!-- #supplementary -->
  • trunk/src/wp-content/themes/twentyfourteen/style.css

    r25063 r25065  
    23402340----------------------------------------------- */
    23412341
    2342 #supplementary .widget-area {
     2342.site-footer .widget-area {
    23432343    -moz-box-sizing: border-box;
    23442344    box-sizing: border-box;
     2345}
     2346.site-footer .widget {
     2347    float: left;
     2348    padding-left: 27px;
     2349    width: 198px;
    23452350}
    23462351
     
    29973002        padding-left: 0;
    29983003    }
    2999     #supplementary .widget-area {
    3000         float: left;
    3001         padding: 0 27px;
    3002         padding: 0 2.7rem;
    3003     }
    3004     #supplementary.one .widget-area {
    3005         width: 100%;
    3006     }
    3007     #supplementary.two .widget-area {
    3008         width: 50%;
    3009     }
    3010     #supplementary.three .widget-area {
    3011         width: 33.33333333%;
    3012     }
    3013     #supplementary.four .widget-area {
    3014         width: 25%;
    3015     }
    3016     #supplementary.five .widget-area {
    3017         width: 20%;
    3018     }
     3004
    30193005}
    30203006
Note: See TracChangeset for help on using the changeset viewer.