Add widget areas above the content sidebar on home page

[CJWheels]

Test site: http://creating.howtorockyourblog.com/

I need to add three evenly spaced widgets above the content-sidebar, and below the navigation on the home page only.

I've added them in the theme functions and called them:

genesis_widget_area( 'top-featured-1', array(
'before' => '<div class="top-featured-1 widget-area">',
) );
genesis_widget_area( 'top-featured-2', array(
'before' => '<div class="top-featured-2 widget-area">',
) );
genesis_widget_area( 'top-featured-3', array(
'before' => '<div class="top-featured-3 widget-area">',
) );

I don't' know how to get them to be above that: .content-sidebar #content-sidebar-wrap, .full-width-content #content, .full-width-content #content-sidebar-wrap, .sidebar-content #content-sidebar-wrap

I have not added:
/** Add the home featured section */
add_action( 'genesis_before_loop', 'runway_home_featured' );
function runway_home_featured() {

I am assuming I need to add something like that for my three new widget areas, but I just can't quite figure out how to group them. I think I will need it to be: genesis_before_content_sidebar_wrap, but I just keep bonking the test site.

Any help on this?

Thanks:)
Cynthia

http://creating.howtorockyourblog.com/

[Brad Dalton]

Do you want the widgets to display inline (side by side) or one after another?

Here's an example using the old XHTML markup http://wpsites.net/web-design/add-widgets-to-news-themes-front-page-with-hover-effects/

---

Tutorials for StudioPress Themes.

[CJWheels]

I want them side by side, and I only want them on the home page. Currently they are home page, just can't figure out how to place them below the nav, and above the content sidebar.
Cynthia

[Brad Dalton]

The link above should give you a pretty good guide as it also creates 3 widgets inline on the front page.

---

Tutorials for StudioPress Themes.

[CJWheels]

OK Brad, that worked brilliantly! http://creating.howtorockyourblog.com/

I would like to add one last widget box directly below it spanning the site for an instagram stream. I tried adding:

genesis_register_sidebar( array(
'id' => 'featured-four',
'name' => __( 'Featured 4 - After Header', '$text_domain' ),
'description' => __( 'This is the featured 4 section.', '$text_domain' ),
) );

and:

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

and it bonks the site...I am so close on this one! Thanks for helping:)
Cynthia

[Brad Dalton]

You've missed a fair amount of the code for the function, hook and conditional tag.

Here's a beginners guide to adding new widgets. http://wpsites.net/web-design/adding-new-widget-areas-in-studiopress-themes/

---

Tutorials for StudioPress Themes.

[CJWheels]

Perhaps I misunderstood. I thought I could just add a 4th widgeted area to the function that had the three widgets. Sounds like I have to write another set of code for that 4th one. I'll try that.
Cynthia

[CJWheels]

I must have just needed to walk away for a moment, this is what totally worked for me in the theme functions:

/** Register 4 New Widgets Before Content Front Page News Theme */

genesis_register_sidebar( array(

'id' => 'featured-one',

'name' => __( 'Featured 1 - After Header', '$text_domain' ),

'description' => __( 'This is the featured 1 section.', '$text_domain' ),

) );

genesis_register_sidebar( array(

'id' => 'featured-two',

'name' => __( 'Featured 2 - After Header', '$text_domain' ),

'description' => __( 'This is the featured 2 section.', '$text_domain' ),

) );

genesis_register_sidebar( array(

'id' => 'featured-three',

'name' => __( 'Featured 3 - After Header', '$text_domain' ),

'description' => __( 'This is the featured 3 section.', '$text_domain' ),

) );

genesis_register_sidebar( array(

'id' => 'featured-four',

'name' => __( 'Featured 4 - After Header', '$text_domain' ),

'description' => __( 'This is the featured 4 section.', '$text_domain' ),

) );

/** Hook In 4 New Header Widgets Sitewide */

add_action( 'genesis_before_content_sidebar_wrap', 'featured_widgets_inline' );
function featured_widgets_inline() {

if ( ! is_front_page() )

return;

if ( is_active_sidebar( 'featured-one' ) || is_active_sidebar( 'featured-two' ) || is_active_sidebar( 'featured-three' ) ) {

printf( '<div %s>', genesis_attr( 'featured-widgets' ) );

genesis_widget_area( 'featured-one', array(

'before' => '<div class="featured-one widget-area">',

'after' => '</div>',

) );

genesis_widget_area( 'featured-two', array(

'before' => '<div class="featured-two widget-area">',

'after' => '</div>',

) );

genesis_widget_area( 'featured-three', array(

'before' => '<div class="featured-three widget-area">',

'after' => '</div>',

) );

genesis_widget_area( 'featured-four', array(

'before' => '<div class="featured-four widget-area">',

'after' => '</div>',

) );

echo '</div>';

}

}

Thanks so much for your help Brad! http://creating.howtorockyourblog.com/
Cynthia

[Brad Dalton]

Good stuff.

---

Tutorials for StudioPress Themes.

[CJWheels]

Since this is still open, I have a quick css question on it. It has been loaded to the live site: http://www.thesitsgirls.com/

How do I make these three added widget boxes stack one beneath the other on mobile instead of how they are currently lining up? I thought adding this to the Media Queries would do the trick, but it does not:

.featured-one .widget,

.featured-two .widget,

.featured-three .widget,

.footer-widgets-1,

.footer-widgets-2,

.footer-widgets-3,

.wrap,

#footer .creds,

#footer .gototop,

#header .widget-area,

#inner,

#title-area,

#wrap .sidebar,

#wrap #content,

#wrap #content-sidebar-wrap,

#wrap #sidebar-alt {

width: 100%;

}

What am I missing?

Thanks
Cynthia

[Author]

Posts