[Resolved] Can I get a full width widget under the header?

Home Forums Support Can I get a full width widget under the header?

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #43827
    Dee Broughton

    Hi, Tom –

    I’m trying to set up this site globalhealth.report

    to have the layout of this one where she has a full width (pink with photo and signup) after her header or as part of her header. http://carmensakurai.com/

    I think I’ve got the other elements set up. Can you take a look and tell me is there and easy way to do this?

    #43869
    Tom
    Lead Developer
    Lead Developer

    You can if you know how to use hooks/add widgets – but not by default right now.

    I have a new addon that will add more widget areas planned – just not ready.

    Your best bet is to do something like I explained here: http://www.generatepress.com/forums/topic/how-to-make-this/#post-41276

    Basically, you would add that HTML and adjust it inside the “After Header” hook in GP Hooks.

    Let me know if that makes sense 🙂

    #43877
    Dee Broughton

    I know how to use hooks and was experimenting with something like that but can you be more specific about the html I need for a full width block widget that I could put an image and a sign up form in?

    #43880
    mikei

    Tom, if you don’t mind, I’ll post mine)

    Dee, you need to create two files in your child theme, although it can be done in many ways.

    function.php

    add_action( 'widgets_init', 'childtheme_register_sidebar' );
    
    function childtheme_register_sidebar(){
        register_sidebar(array(
            'name' => 'Top Sidebar',
            'id' => 'top-sidebar',
            'before_widget' => '<aside id="%1$s" class="widget inner-padding %2$s">',
            'after_widget' => '</aside>',
            'before_title' => '<h3 class="widget-title">',
            'after_title' => '</h3>',
        ));
    }
    
    add_action('generate_after_header', 'childtheme_add_sidebar');
    function childtheme_add_sidebar(){
        return get_sidebar( 'top' );
    };

    sidebar-top.php (note, my sidebar will appear only on the front page, you may not need the same condition. Also, it won’t appear if no widgets in it)

    <?php if ( is_active_sidebar('top-sidebar') && (is_front_page()) ) : ?>
    	<div id="top-sidebar" itemtype="http://schema.org/WPSideBar" itemscope="itemscope" role="complementary">
    		<div class="site grid-container container site-container grid-parent">
    			<?php dynamic_sidebar( 'top-sidebar' ); ?>
    		</div>
    	</div>
    <?php endif; ?>	
    #43894
    Dee Broughton

    Mikei –

    Thanks so much for the help. I haven’t been using child themes with GeneratePress. I was doing fine with Simple Custom CSS and hooks. Is it best if I do this with a child theme, though, or can I do it with just the GP hooks addon?

    #43924
    mikei

    Actually, you mentioned “Widget”, but you may not need a widget or sidebar. You can add HTML in the GP hook addon.
    If you want it full width, use a markup that is similar to mine. You need to make use of GP grid system

    <div id="your-widget">
    <div class="site grid-container container site-container grid-parent">
    Your stuff
    </div>
    </div>
    #44061
    Dee Broughton

    Tom –

    I think I need a widget in order to put the iContact signup form in it, but with MiKei’s advice, I’m no longer sure. Can you be a little more specific about how I would use the hooks and if I do need a widget there?

    Mikei –

    I’m pouring over this and working it out. Thank you.

    Dee

    #44074
    Tom
    Lead Developer
    Lead Developer

    Mikei – you’re awesome! Thank you for helping out 🙂

    Dee – The code Mikei provided is perfect if you want to add a widget area under the header, but it does involve creating a couple of child theme files.

    What format does the iContact signup come in? Is it a widget? Or do they give you HTML?

    If it’s a widget, another option would be to use this plugin: https://wordpress.org/plugins/widget-shortcode/

    It allows you to add widgets to an “Arbitrary” section, which then gives you a shortcode which you can place in GP Hooks.

    Hope this helps 🙂

    #45367
    Dee Broughton

    Tom – Thank you very much. This plugin with the arbitrary widget space worked well. I had to put it After Header Content space to make it look the way I wanted, but then it wasn’t full-width. I’ve forced it to be full-width but I’m sure my ham-fisted CSS will cause browser issues. It looks good in Firefox, but…. Any suggestions for how to make it full-width properly?

    #45398
    Tom
    Lead Developer
    Lead Developer

    Do you have a link for the site so I can see how you’ve done it so far?

    Thanks!

    #45411
    Dee Broughton
    #45560
    Tom
    Lead Developer
    Lead Developer

    Your best bet is placing it in the “After Header” area – then you’re not constricted by any container, and can create your own container within it with your specified width.

    Let me know if that makes sense or not 🙂

    #45614
    Dee Broughton

    It makes perfect sense, but, as far as I can tell, doing that does not allow the full width widget area to be above the secondary navigation as in http://carmensakurai.com/

    Putting the new full width widget area in After Header causes the secondary navigation to be above it. I even attempted switching the secondary with the primary navigation in case they behaved differently in this respect, but, of course, they don’t. Neither menu can be placed after the After Header area.

    Design-wise, the full width widget area belongs between the two menus.

    #45856
    Tom
    Lead Developer
    Lead Developer

    Hmm, interesting issue.

    Do you have a functions.php file in your child theme?

    If so, try dropping this in:

    add_action('after_setup_theme','dee_move_secondary_nav');
    function dee_move_secondary_nav()
    {
          remove_action( 'generate_after_header', 'generate_add_secondary_navigation_after_header', 7 );
          add_action( 'generate_after_header', 'generate_add_secondary_navigation_after_header', 11 );
    }
    #46504
    Dee Broughton

    That is beautiful! It took me a while to get back to this one, but it works like a charm. http://globalhealth.report/

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.