Skip to content

Instantly share code, notes, and snippets.

@SiGaCode
Last active August 29, 2015 14:12
Show Gist options
  • Save SiGaCode/748af2f9d8b43f252d47 to your computer and use it in GitHub Desktop.
Save SiGaCode/748af2f9d8b43f252d47 to your computer and use it in GitHub Desktop.
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
//* 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' ),
) );
/* 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%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment