WordPress: Widget aware Areas
/* 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%;
}
}
<?php
// Do NOT include the opening php tag
//* Setup widget counts
function dynamik_count_widgets( $id ) {
global $sidebars_widgets;
if ( isset( $sidebars_widgets[ $id ] ) ) {
return count( $sidebars_widgets[ $id ] );
}
}
function dynamik_widget_area_class( $id ) {
$count = dynamik_count_widgets( $id );
if( $count == 2 ) {
$class .= ' widget-count-2';
} elseif( $count == 3 ) {
$class .= ' widget-count-3';
} elseif( $count == 4 ) {
$class .= ' widget-count-4';
} elseif( $count == 5 ) {
$class .= ' widget-count-5';
} elseif( $count == 6 ) {
$class .= ' widget-count-6';
} else {
$class .= '';
}
return $class;
}
//* 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-aware' . dynamik_widget_area_class( '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-aware' . dynamik_widget_area_class( '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-aware' . dynamik_widget_area_class( '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-aware' . dynamik_widget_area_class( 'after-ez-home-4' ) . ' clearfix"><div class="ez-widget-area clearfix">',
'after' => '</div></div>',
) );
genesis_widget_area( 'after-ez-home-5', array(
'before' => '<div id="after-ez-home-5" class="widget-aware' . dynamik_widget_area_class( 'after-ez-home-5' ) . ' 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' ),
) );
genesis_register_sidebar( array(
'id' => 'after-ez-home-5',
'name' => __( 'After EZ Home #5', 'dynamik-gen' ),
) );