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

[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?

[Tom]

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 🙂

[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?

[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; ?>	

[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?

[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>

[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

[Tom]

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 🙂

[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?

[Tom]

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

Thanks!

[Dee Broughton]

Same as OP, http://www.globalhealth.report

[Tom]

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 🙂

[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.

[Tom]

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 );
}

[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/

[Author]

Posts