siga
12/24/2014 - 1:27 PM

Here is an example of widget areas that know how many widgets are in them. For example, if you put two widgets in the widget area they each

Here is an example of widget areas that know how many widgets are in them. For example, if you put two widgets in the widget area they each get a width of half. Credits: Junior Atoms / Larry http://cobaltapps.com/forum/forum/dynamik-skin-forums/tools-tips-other-skin-resources-aa/45619-widget-aware-widget-areas

widget_aware_widget_areas_css.css
content_copyfile_download
/* Widget Counts */

.widget-count-2 .widget,
.widget-count-3 .widget,
.widget-count-4 .widget,
.widget-count-5 .widget,
.widget-count-6 .widget {
    float: left;
    margin-left: 2.564102564102564%;
    margin-bottom: 20px;
}

.widget-count-2 .widget:first-child,
.widget-count-3 .widget:first-child,
.widget-count-4 .widget:first-child,
.widget-count-5 .widget:first-child,
.widget-count-6 .widget:first-child {
    clear: both;
    margin-left: 0;
}

.widget-count-2 .widget {
    width: 48.717948717948715%;
}

.widget-count-3 .widget {
    width: 31.623931623931625%;
}

.widget-count-4 .widget {
    width: 23.076923076923077%;
}

.widget-count-5 .widget {
    width: 17.9487179487179488%;
}

.widget-count-6 .widget {
    width: 14.52991452991453%;
}

@media only screen and (max-width: 1140px) {

    .widget-count-2 .widget,
    .widget-count-3 .widget,
    .widget-count-4 .widget,
    .widget-count-5 .widget,
    .widget-count-6 .widget {
        clear: both;
        margin-left: 0;
        width: 100%;
    }
    
}
widget_aware_widget_areas.php
content_copyfile_download
//* Count the number of widgets in a widget-area
function dynamik_count_sidebar_widgets( $sidebar_id ) {
    
    $the_widgets = wp_get_sidebars_widgets();
    
    if( isset( $the_widgets[$sidebar_id] ) ) {
        return count( $the_widgets[$sidebar_id] );
    }
}

//* Add markup for the after ez home widget areas
add_action( 'dynamik_hook_after_ez_home', 'dynamik_after_ez_home_widgets' );
function dynamik_after_ez_home_widgets() {

    genesis_widget_area( 'after-ez-home-1', array(
        'before' => '<div id="after-ez-home-1" class="widget-count-' . dynamik_count_sidebar_widgets( 'after-ez-home-1' ) . ' clearfix"><div class="ez-widget-area clearfix">',
        'after'  => '</div></div>',
    ) );

    genesis_widget_area( 'after-ez-home-2', array(
        'before' => '<div id="after-ez-home-2" class="widget-count-' . dynamik_count_sidebar_widgets( 'after-ez-home-2' ) . ' clearfix"><div class="ez-widget-area clearfix">',
        'after'  => '</div></div>',
    ) );

    genesis_widget_area( 'after-ez-home-3', array(
        'before' => '<div id="after-ez-home-3" class="widget-count-' . dynamik_count_sidebar_widgets( 'after-ez-home-3' ) . ' clearfix"><div class="ez-widget-area clearfix">',
        'after'  => '</div></div>',
    ) );

    genesis_widget_area( 'after-ez-home-4', array(
        'before' => '<div id="after-ez-home-4" class="widget-count-' . dynamik_count_sidebar_widgets( 'after-ez-home-4' ) . ' clearfix"><div class="ez-widget-area clearfix">',
        'after'  => '</div></div>',
    ) );

}
    
//* Register after ez home widget areas
genesis_register_sidebar( array(
    'id'          => 'after-ez-home-1',
    'name'        => __( 'After EZ Home #1', 'dynamik-gen' ),
) );
genesis_register_sidebar( array(
    'id'          => 'after-ez-home-2',
    'name'        => __( 'After EZ Home #2', 'dynamik-gen' ),
) );
genesis_register_sidebar( array(
    'id'          => 'after-ez-home-3',
    'name'        => __( 'After EZ Home #3', 'dynamik-gen' ),
) );
genesis_register_sidebar( array(
    'id'          => 'after-ez-home-4',
    'name'        => __( 'After EZ Home #4', 'dynamik-gen' ),
) );