April 3, 2013 by Brad Dalton
/** FOUR WIDGET AREAS above blog archives **/
/** Register sub widget areas */
/** I registered 2 more widget areas for a total of 4 */
/** I also added the 'after' code in the action section */
genesis_register_sidebar( array(
'id' => 'sub-widget-left',
'name' => __( 'Sub Widget Left', 'child' ),
'description' => __( 'This is the sub widget left section.', 'child' )
) );
genesis_register_sidebar( array(
'id' => 'sub-widget-left2',
'name' => __( 'Sub Widget Left 2', 'child' ),
'description' => __( 'This is the sub widget left section.', 'child' )
) );
genesis_register_sidebar( array(
'id' => 'sub-widget-right',
'name' => __( 'Sub Widget Right', 'child' ),
'description' => __( 'This is the sub widget right section.', 'child' )
) );
genesis_register_sidebar( array(
'id' => 'sub-widget-right2',
'name' => __( 'Sub Widget Right 2', 'child' ),
'description' => __( 'This is the sub widget right section.', 'child' )
) );
/** Add the sub widget section */
/** Must group the 4 sub-widgets inside parentheses after is_home() && */
add_action( 'genesis_before_content', 'wpsites_sub_widget', 5 );
function wpsites_sub_widget() {
if ( is_home() && (is_active_sidebar( 'sub-widget-left' ) || is_active_sidebar( 'sub-widget-left2' ) || is_active_sidebar( 'sub-widget-right' ) || is_active_sidebar( 'sub-widget-right2' ) ) ) {
echo '<div id="sub-widget"><div class="wrap">';
genesis_widget_area( 'sub-widget-left', array(
'before' => '<div class="sub-widget-left">',
'after' => '</div>',
) );
genesis_widget_area( 'sub-widget-left2', array(
'before' => '<div class="sub-widget-left2">',
'after' => '</div>',
) );
genesis_widget_area( 'sub-widget-right', array(
'before' => '<div class="sub-widget-right">',
'after' => '</div>',
) );
genesis_widget_area( 'sub-widget-right2', array(
'before' => '<div class="sub-widget-right2">',
'after' => '</div>',
) );
echo '</div><!-- end .wrap --></div><!-- end #sub-widget -->';
}
}
/* Sub Widgets
------------------------------------------------------------ */
#sub-widget {
clear: both;
font-size: 16px;
margin: 0 auto;
overflow: hidden;
padding: 40px 0;
width: 100%;
}
#sub-widget h4 {
font-size: 16px;
font-weight: normal;
}
#sub-widget a,
#sub-widget a:visited {
}
#sub-widget p {
color: inherit;
font-size: inherit;
}
.sub-widget-left, .sub-widget-left2, .sub-widget-right {
float: left;
width: 23.076923076923077%;
margin-left: 2.564102564102564%;
}
.sub-widget-left {
clear: both;
margin-left: 0;
}
.sub-widget-right2 {
float: right;
width: 23.076923076923077%;
margin-left: 2.564102564102564%;
}
/* Responsive Design
------------------------------------------------------------ */
@media only screen and (max-width: 1200px) {
/* no need for these
.sub-widget-right {
width: 460px;
}
.sub-widget-left {
width: 460px;
}
----- */
@media only screen and (max-width: 1023px) {
.sub-widget-left,
.sub-widget-right {
width: 100%;
}