Add sidebar widget to home page – Executive Pro

Community Forums Forums Design Tips and Tricks Add sidebar widget to home page – Executive Pro

This topic is: not resolved

This topic contains 8 replies, has 2 voices, and was last updated by  lwlindquist 4 months, 4 weeks ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #75418

    lwlindquist
    Participant
    Post count: 18

    I’m pretty sure there’s an easier way to have done this… so an assist with either doing it the right way, or adjusting what I did do would be so appreciated. :)

    Wanting to add a sidebar to the home page in Executive Pro, under the slider. What I’ve done so far: changed the width of the Home Top widget area to 66%, added a Home Sidebar widget area and set the width at 33%.

    It’s there, so I counted that a success. :) But I am hoping someone can tell me what I would need to do in order to have it aligned with the Home Top widget, rather than sitting below it.

    Of course, if there’s just a simple way to have the standard sidebar appear on the home page below the slider, I’d be more than thrilled to take my cobbled-together solution back out. :)

    Site here: http://morguesslawoffice.com/

    Thanks much!

    http://morguesslawoffice.com/
    #75431

    nutsandbolts
    Moderator
    Post count: 2615

    It would probably be easier to do it this way… I would take out the CSS changes for Home Top, though, or it will look crazy.

    First, remove this line from front-page.php:

    add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

    That’s the line that forces full width on the homepage when the widget areas are active.

    That said, once you remove it, the sidebar will be beside the slider instead of below it. There’s a fix for that, too, though!

    Also in front-page.php, find this under function executive_home_sections()

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

    Remove it, then scroll down to an empty line between two functions and add this:

    // Move the home slider area outside the sidebar-content wrap
    add_action( 'genesis_before_content_sidebar_wrap', 'nabm_move_home_slider' );
    function nabm_move_home_slider() {
    	if ( is_active_sidebar( 'home-slider' ) )
    	genesis_widget_area( 'home-slider', array(
    		'before' => '<div class="home-slider widget-area">',
    		'after'  => '</div>',
    	) );
    }

    That will make it full width again and the sidebar will display next to home top. You’ll probably need to add some padding in various places (like between the other home widget areas and the sidebar, judging by my test site) but that’s much more sound from a structural perspective versus adding a new widget area and trying to get it to style correctly.

    Hope that helps!


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I do Genesis tutorials, design and development, and other fun stuff • Find me on Twitter and Google+

    #75595

    lwlindquist
    Participant
    Post count: 18

    Terrific, thanks for your help with that.

    I’ve deleted/added the code you suggest, which now gets me the default sidebar widget displaying on the homepage (which ultimately was the goal) but it’s still not displaying aligned with the Home Top, rather not until the Home Top is done.

    Suggestions on how to bring it up to sit just under the slider like the Home Top widget area?

    Thanks!

    #75597

    nutsandbolts
    Moderator
    Post count: 2615

    Can you paste in your front-page.php? That might make it easier to see what’s going on structurally. Also, I noticed that your home-sidebar widget area is still there, which may be part of the reason the actual sidebar is being pushed down.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I do Genesis tutorials, design and development, and other fun stuff • Find me on Twitter and Google+

    #75601

    lwlindquist
    Participant
    Post count: 18

    Here you go — I deleted the home-sidebar (thought I’d caught all the references, but missed that one, so thank you) but still sitting at the bottom:

    Thanks :)

    <?php
    /**
    * This file adds the Home Page to the Executive Pro Theme.
    *
    * @author StudioPress
    * @package Generate
    * @subpackage Customizations
    */

    add_action( ‘genesis_meta’, ‘executive_home_genesis_meta’ );
    /**
    * Add widget support for homepage. If no widgets active, display the default loop.
    *
    */
    function executive_home_genesis_meta() {

    if ( is_active_sidebar( ‘home-slider’ ) || is_active_sidebar( ‘home-top’ ) || is_active_sidebar( ‘home-cta’ ) || is_active_sidebar( ‘home-middle’ ) ) {

    remove_action( ‘genesis_loop’, ‘genesis_do_loop’ );
    add_action( ‘genesis_loop’, ‘executive_home_sections’ );
    add_filter( ‘body_class’, ‘executive_add_home_body_class’ );

    }

    }

    function executive_home_sections() {

    genesis_widget_area( ‘home-top’, array(
    ‘before’ => ‘<div class=”home-top widget-area”>’,
    ‘after’ => ‘</div>’,
    ) );

    genesis_widget_area( ‘home-cta’, array(
    ‘before’ => ‘<div class=”home-cta widget-area”>’,
    ‘after’ => ‘</div>’,
    ) );

    genesis_widget_area( ‘home-middle’, array(
    ‘before’ => ‘<div class=”home-middle widget-area”>’,
    ‘after’ => ‘</div>’,
    ) );

    }

    // Move the home slider area outside the sidebar-content wrap
    add_action( ‘genesis_before_content_sidebar_wrap’, ‘nabm_move_home_slider’ );
    function nabm_move_home_slider() {
    if ( is_active_sidebar( ‘home-slider’ ) )
    genesis_widget_area( ‘home-slider’, array(
    ‘before’ => ‘<div class=”home-slider widget-area”>’,
    ‘after’ => ‘</div>’,
    ) );
    }

    //* Add body class to home page
    function executive_add_home_body_class( $classes ) {

    $classes[] = ‘executive-pro-home’;
    return $classes;

    }

    genesis();

    #75604

    nutsandbolts
    Moderator
    Post count: 2615

    I just noticed that you’re using a 960px grid for .site-inner instead of the 1140px grid that is standard with Executive Pro. Was that there last night? The sidebar is being pushed to the bottom on all pages because the content is 800px wide. With all the width changes it’s hard to tell exactly what’s messing up the sidebar on the homepage.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I do Genesis tutorials, design and development, and other fun stuff • Find me on Twitter and Google+

    #75606

    lwlindquist
    Participant
    Post count: 18

    It was there last night, but not acting up until today. :)

    I changed the grid back to 1140px and got the sidebar to reappear. so we know where that problem was coming from. Score. :)

    Unfortunately, now I’m back to a wider grid than I prefer and I can’t for the life of me persuade the slider to center on the page. Thoughts?

    #75607

    nutsandbolts
    Moderator
    Post count: 2615

    Is that area actually going to use a slider, or is the static image staying there? If you’re not going to have slides, you could just replace the responsive slider widget with a text widget:

    <center><img src=http://morguesslawoffice.com/wp-content/uploads/2013/11/IEI-header-960x375.png></center>

    If you’re planning to use the slider, let me know and we’ll work on getting it to center.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I do Genesis tutorials, design and development, and other fun stuff • Find me on Twitter and Google+

    #75608

    lwlindquist
    Participant
    Post count: 18

    Now, why have I never thought of that? :)

    Alright. That works, and now I just need to fiddle with the css to work the rest of it out.

    Thanks so much for your help and patience.

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

You must be logged in to reply to this topic.