Problem with new widget areas on News Pro homepage

[CThor]

I'm working on developing a "knowledge" site for a business school, and we want to be able to display articles by topic. To this end, I took the "home-middle" widget areas in News Pro and duplicated them to add four new "home-middle" areas. So there are now the original home-middle-left and home-middle-right, plus a home-middle-left-1, a home-middle-right-1, a home-middle-left-2, and a home-middle-right-2. Also created an ad section widget, to be placed in the middle of these home-middle widgets.

Registering the widget areas was no problem. I got content into the widget areas without a problem. The problem is that the widget areas aren't displaying side-by-side, left-right, as they should be. It's different in Chrome and Safari, but here's a Safari snapshot that shows part of the problem:

I've been playing around with the code in front-page.php for many hours now. At one point, I had:

function news_homepage_widgets() {

if ( is_active_sidebar( 'home-middle-left' ) || is_active_sidebar( 'home-middle-right' ) || is_active_sidebar( 'home-adsection' ) || is_active_sidebar( 'home-middle-left-1' ) || is_active_sidebar( 'home-middle-right-1' ) || is_active_sidebar( 'home-middle-left-2' ) || is_active_sidebar( 'home-middle-right-2' ) || is_active_sidebar( 'home-bottom' ) ) {

genesis_widget_area( 'home-middle-left', array(
'before' => '<div class="home-middle-left widget-area">',
'after' => '</div>',
) );

genesis_widget_area( 'home-middle-right', array(
'before' => '<div class="home-middle-right widget-area">',
'after' => '</div>',
) );

genesis_widget_area( 'home-adsection', array(
'before' => '<div class="home-adsection widget-area">',
'after' => '</div>',
) );

genesis_widget_area( 'home-middle-left-1', array(
'before' => '<div class="home-middle-left1 widget-area">',
'after' => '</div>',
) );

genesis_widget_area( 'home-middle-right-1', array(
'before' => '<div class="home-middle-right1 widget-area">',
'after' => '</div>',
) );

genesis_widget_area( 'home-middle-left-2', array(
'before' => '<div class="home-middle-left widget-area">',
'after' => '</div>',
) );

genesis_widget_area( 'home-middle-right-2', array(
'before' => '<div class="home-middle-right widget-area">',
'after' => '</div>',
) );

}

As I've tried everything, this has evolved to the more complicated:

function news_homepage_widgets() {

if ( is_active_sidebar( 'home-middle-left' ) || is_active_sidebar( 'home-middle-right' )) {

echo '<div class="home-middle">';

genesis_widget_area( 'home-middle-left', array(
'before' => '<div class="home-middle-left widget-area">',
'after' => '</div>',
) );

genesis_widget_area( 'home-middle-right', array(
'before' => '<div class="home-middle-right widget-area">',
'after' => '</div>',
) );

echo '</div>';

}

if ( is_active_sidebar( 'home-adsection' )) {

echo '<div class="home-adsection">';

genesis_widget_area( 'home-adsection', array(
'before' => '<div class="home-adsection widget-area">',
'after' => '</div>',
) );

echo '</div>';

}

if ( is_active_sidebar( 'home-middle-left-1' ) || is_active_sidebar( 'home-middle-right-1' )) {

echo '<div class="home-middle">';

genesis_widget_area( 'home-middle-left-1', array(
'before' => '<div class="home-middle-left1 widget-area">',
'after' => '</div>',
) );

genesis_widget_area( 'home-middle-right-1', array(
'before' => '<div class="home-middle-right1 widget-area">',
'after' => '</div>',
) );

echo '</div>';

}

if ( is_active_sidebar( 'home-middle-left-2' ) || is_active_sidebar( 'home-middle-right-2' ) || is_active_sidebar( 'home-bottom' ) ) {

echo '<div class="home-middle">';

genesis_widget_area( 'home-middle-left-2', array(
'before' => '<div class="home-middle-left2 widget-area">',
'after' => '</div>',
) );

genesis_widget_area( 'home-middle-right-2', array(
'before' => '<div class="home-middle-right2 widget-area">',
'after' => '</div>',
) );

echo '</div>';

genesis_widget_area( 'home-bottom', array(
'before' => '<div class="home-bottom widget-area">',
'after' => '</div>',
) );

}
}

I've also played around with the CSS, and at the moment have:

/* Home Page
--------------------------------------------- */

.home-top {
background-color: #ffffff;
border-bottom: 0px solid #e3e3e3;
clear: both;
padding: 20px 20px 0;
padding: 2rem 2rem 0;
}

.home-top .featured-content .entry-title {
font-size: 30px;
font-size: 3rem;
}

.home-middle-left {
border-right: 1px solid #e3e3e3;
float: left;
padding: 20px 20px 0;
padding: 2rem 2rem 0;
width: 50%;
}

.home-middle-left1 {
border-right: 1px solid #e3e3e3;
float: left;
padding: 20px 20px 0;
padding: 2rem 2rem 0;
width: 50%;
}

.home-middle-left2 {
border-right: 1px solid #e3e3e3;
float: left;
padding: 20px 20px 0;
padding: 2rem 2rem 0;
width: 50%;
}

.home-middle-right {
float: right;
padding: 20px 20px 0;
padding: 2rem 2rem 0;
width: 50%;
}

.home-middle-right1 {
float: right;
padding: 20px 20px 0;
padding: 2rem 2rem 0;
width: 50%;
}

.home-middle-right2 {
float: right;
padding: 20px 20px 0;
padding: 2rem 2rem 0;
width: 50%;
}

.home-adsection {
border-top: 1px solid #e3e3e3;
clear: both;
padding: 20px 20px 0;
padding: 2rem 2rem 0;
}

.home-bottom {
border-top: 1px solid #e3e3e3;
clear: both;
padding: 20px 20px 0;
padding: 2rem 2rem 0;
}

If anyone sees what I'm doing wrong, your help is much appreciated--and thanks in advance!

[Gandt]

If you post a link to the live site I can look into it. With just the snapshots, there's not enough info to troubleshoot this (at least not for me).

G

[CThor]

Thanks, Gandt. Unfortunately, it's on a development server and not available to the public.

Here's what I've got in functions.php, in case it's useful to you or anyone else:

//* Register widget areas
genesis_register_sidebar( array(
'id' => 'home-top',
'name' => __( 'Home - Top', 'news' ),
'description' => __( 'This is the top section of the homepage.', 'news' ),
) );
genesis_register_sidebar( array(
'id' => 'home-middle-left',
'name' => __( 'Home - Middle Left', 'news' ),
'description' => __( 'This is the middle left section of the homepage.', 'news' ),
) );
genesis_register_sidebar( array(
'id' => 'home-middle-right',
'name' => __( 'Home - Middle Right', 'news' ),
'description' => __( 'This is the middle right section of the homepage.', 'news' ),
) );
genesis_register_sidebar( array(
'id' => 'home-adsection',
'name' => __( 'Home - Adsection', 'news' ),
'description' => __( 'This is the ad section of the homepage.', 'news' ),
) );
genesis_register_sidebar( array(
'id' => 'home-middle-left-1',
'name' => __( 'Home - Middle Left-1', 'news' ),
'description' => __( 'This is the middle left-1 section of the homepage.', 'news' ),
) );
genesis_register_sidebar( array(
'id' => 'home-middle-right-1',
'name' => __( 'Home - Middle Right-1', 'news' ),
'description' => __( 'This is the middle right-1 section of the homepage.', 'news' ),
) );
genesis_register_sidebar( array(
'id' => 'home-middle-left-2',
'name' => __( 'Home - Middle Left-2', 'news' ),
'description' => __( 'This is the middle left-2 section of the homepage.', 'news' ),
) );
genesis_register_sidebar( array(
'id' => 'home-middle-right-2',
'name' => __( 'Home - Middle Right-2', 'news' ),
'description' => __( 'This is the middle right-2 section of the homepage.', 'news' ),
) );
genesis_register_sidebar( array(
'id' => 'home-bottom',
'name' => __( 'Home - Bottom', 'news' ),
'description' => __( 'This is the bottom section of the homepage.', 'news' ),
) );
genesis_register_sidebar( array(
'id' => 'after-entry',
'name' => __( 'After Entry', 'news' ),
'description' => __( 'This is the after entry section.', 'news' ),
) );

[Author]

Posts