Community Forums › Forums › Archived Forums › Design Tips and Tricks › Add widget areas above the content sidebar on home page
- This topic has 9 replies, 2 voices, and was last updated 10 years, 3 months ago by CJWheels.
-
AuthorPosts
-
November 6, 2013 at 2:30 pm #71306CJWheelsMember
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:)
http://creating.howtorockyourblog.com/
CynthiaNovember 6, 2013 at 6:11 pm #71338Brad DaltonParticipantDo 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/
November 6, 2013 at 6:59 pm #71352CJWheelsMemberI 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.
CynthiaNovember 6, 2013 at 8:31 pm #71371Brad DaltonParticipantThe link above should give you a pretty good guide as it also creates 3 widgets inline on the front page.
November 7, 2013 at 2:52 pm #71541CJWheelsMemberOK 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:)
CynthiaNovember 7, 2013 at 4:55 pm #71558Brad DaltonParticipantYou'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/
November 7, 2013 at 5:16 pm #71567CJWheelsMemberPerhaps 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.
CynthiaNovember 7, 2013 at 5:40 pm #71569CJWheelsMemberI 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/
CynthiaNovember 7, 2013 at 8:24 pm #71609Brad DaltonParticipantDecember 9, 2013 at 6:00 pm #77920CJWheelsMemberSince 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 -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.