Add widget areas above the content sidebar on home page

Community Forums Forums Design Tips and Tricks Add widget areas above the content sidebar on home page

This topic is: not resolved

This topic contains 9 replies, has 2 voices, and was last updated by  CJWheels 11 months, 3 weeks ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #71306

    CJWheels
    Member
    Post count: 40

    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/
    #71338

    braddalton
    Participant
    Post count: 10580

    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/


    #71352

    CJWheels
    Member
    Post count: 40

    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

    • This reply was modified 1 year ago by  CJWheels.
    • This reply was modified 1 year ago by  CJWheels.
    • This reply was modified 1 year ago by  CJWheels.
    • This reply was modified 1 year ago by  CJWheels.
    #71371

    braddalton
    Participant
    Post count: 10580

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


    #71541

    CJWheels
    Member
    Post count: 40

    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

    #71558

    braddalton
    Participant
    Post count: 10580

    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/


    #71567

    CJWheels
    Member
    Post count: 40

    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

    #71569

    CJWheels
    Member
    Post count: 40

    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

    #71609

    braddalton
    Participant
    Post count: 10580
    #77920

    CJWheels
    Member
    Post count: 40

    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

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.