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 13 replies, has 4 voices, and was last updated by  braddalton 3 months, 2 weeks ago.

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

    lwlindquist
    Participant
    Post count: 24

    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
    Keymaster
    Post count: 3176

    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 provide dev and training services for web designers • Find me on Twitter and Google+

    #75595

    lwlindquist
    Participant
    Post count: 24

    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
    Keymaster
    Post count: 3176

    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 provide dev and training services for web designers • Find me on Twitter and Google+

    #75601

    lwlindquist
    Participant
    Post count: 24

    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
    Keymaster
    Post count: 3176

    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 provide dev and training services for web designers • Find me on Twitter and Google+

    #75606

    lwlindquist
    Participant
    Post count: 24

    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
    Keymaster
    Post count: 3176

    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 provide dev and training services for web designers • Find me on Twitter and Google+

    #75608

    lwlindquist
    Participant
    Post count: 24

    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.

    #113829

    iellis
    Member
    Post count: 5

    Nutsandbolts,

    I have a very similar problem, but with a different theme – the Swank theme. I have removed the forced full page width to restore the sidebar, but I can’t seem to get the Genesis Responsive Slider to be full width above the sidebar…

    What I am trying to do is get the slider full width, then the sidebar and recent posts below, like you can see on the mock-up here: https://www.dropbox.com/s/lctyarfj41xnc0j/OD%20MOCK%20UP.jpg

    Help would be greatly appreciated!

    Ian

    #114008

    braddalton
    Participant
    Post count: 10356
    genesis_widget_area( 'home-slider', array(
    		'before' => '<div class="home-slider widget-area">',
    		'after'  => '</div>',
    	) );
    
    add_action( 'genesis_before_content_sidebar_wrap', 'nabm_move_home_slider' );
    function nabm_move_home_slider() {
    	if ( is_front_page() && is_active_sidebar( 'home-slider' ) )
    	genesis_widget_area( 'home-slider', array(
    		'before' => '<div class="home-slider widget-area">',
    		'after'  => '</div>',
    	) );
    }
    

    Here’s the code for your functions file.

    I added the conditional tag so it only displays on the front page.


    #114113

    iellis
    Member
    Post count: 5

    Brad,

    Thank you so much for replying. I added that code to my functions file, and while it does appear to add the full width slider back to the homepage above the sidebar/content – now I have two new problems:

    1. It still doesn’t show latest posts in the content area below the slider, in fact it appears to be showing the slider again…

    2. I seem to have gained an extra horizontal line across the top of the site…

    thoughts? http://www.owensanddavis.com

    Thanks!

    Ian

    #114115

    iellis
    Member
    Post count: 5

    Brad,

    One more thing that is happening when you add that code. I get an error when I make any changes inside the admin panel (activate/deactivate a plugin, change a page, etc…)

    I get a blank browser window and the following error:

    Warning: Cannot modify header information – headers already sent by (output started at /home/owensdavis/public_html/wp-content/themes/genesis/lib/functions/widgetize.php:264) in /home/owensdavis/public_html/wp-includes/pluggable.php on line 1121

    #114121

    braddalton
    Participant
    Post count: 10356

    There is nothing wrong with the code.

    There is no loop in the front-page.php file as its been replaced with widgets

    remove_action( 'genesis_loop', 'genesis_do_loop' );
    add_action( 'genesis_loop', 'executive_home_sections' );
    

    The code i pasted is for your functions file however you can add it to your front-page.php file otherwise you will need to remove the code which creates the same widget in that file or you may get errors.

    Sounds like you have duplicated code.


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

You must be logged in to reply to this topic.