In a typical Genesis Child Theme, the header and footer elements are nestled safely inside the main structural #wrap. Today’s challenge is to move the header and footer outside of the main #wrap.
Why would I want to do that? Well, I want to create a theme with a full-width header & footer and fixed-width content. Like this:
In order to carry out this, I’ve opted to reposition the header above the main #wrap and the footer below the main #wrap.
Now there’s another way to go about creating a full-width Genesis Child Theme, as Christopher helpfully dissects here. His method deals with changing the width on the grandaddy #wrap that contains the entire site as well as the mini .wrap(s) that apply to specific sub-sections (i.e. header, nav, inner, etc).
I wanted the same outcome, but didn’t want to change the wrap structure to get there. Here’s how I did it…
Starting with the Defaults
The default structure in most StudioPress child themes will look like this:
We want to move the header and the footer so that our structure looks like this:
Wrap-Up (pun fully intended)
Sometimes I try to make things harder than necessary, but in this case it’s pretty simple! Check the following code blocks:
Move the Header Outside the Main Wrap
To move the header up before the main wrapper <div id=”wrap”>, add this to your functions.php:
Move the Footer Outside the Main Wrap
Moving the footer outside the main wrapper <div id=”wrap”> is just as easy!
BONUS: Move the Primary Nav Above the Header AND Outside the Main Wrap
What’s that? You’re feeling adventurous? Try out this action:
Move the Header and Footer
If you want to play around more with using hooks to reposition elements in your theme, here are some great resources for your bookmarking pleasure:
- Visual Hook Reference (a list of all available hooks you can use with Genesis)
- Visual Hook Guide (diagram showing where the hooks output on a page)
- Visual Markup Guide (diagram showing the structural wraps on a typical Genesis layout)
Carrie,
I tried this, but it didn’t move my header, just moved the title area ouside. The header div is still in the wrap. What am I doing wrong?
Which theme are you using?
Fresh scoop from the StudioPress forum, if you happen to be using Prose or one with similar setup:
All PHP should go in Prose’s custom code box:
/** Reposition header outside main wrap */
remove_action( ‘genesis_header’, ‘genesis_header_markup_open’, 5 );
remove_action( ‘genesis_header’, ‘genesis_do_header’ );
remove_action( ‘genesis_header’, ‘genesis_header_markup_close’, 15) ;
add_action( ‘genesis_before’, ‘genesis_header_markup_open’, 5 );
add_action( ‘genesis_before’, ‘genesis_do_header’ );
add_action( ‘genesis_before’, ‘genesis_header_markup_close’, 15 );
See full post at http://www.studiopress.com/support/showthread.php?t=115274
Carrie, I’ve been looking everywhere in my child themes for something that looks like this:
“The default structure in most StudioPress child themes will look like this:
div id=”wrap” … etc
but can’t seem to find this code – where should I be looking? I’ve checked style.css, functions.php, home.php …
Hi Lucy,
If you were to look at the html output (soure code in a browser) for a page, it would have that structure.
Which child theme are you using?
Hi Carrie,
I’ve tried this using the Sample theme and Simply Sweet – on both child themes the header remains within the wrap. Same with the footer too! Have you any suggestions?
Thanks
Andy
Hi Andy,
Thanks for stopping by! Try the recommendations in this thread: http://www.studiopress.com/support/showthread.php?t=115274. 🙂
Carrie
Thanks Carrie,
I’m new to Genesis, but having fun getting to know it! I’d added a couple of other actions to the genesis_before hook and had my priorities mixed up! Appreciate the pointer.
Best wishes
Andy
This is a great little plugin for visually seeing where to hook into different spots on your Genesis site: http://wordpress.org/extend/plugins/genesis-visual-hook-guide/
Glad you’re having fun learning – there are TONS of great tutorials and support online! Feel shout out via comment or Twitter if you have questions.
Thanks
Carrie
/** Move Header before Wrap **/
remove_action(‘genesis_header’, ‘genesis_do_header’);
remove_action(‘genesis_header’, ‘genesis_header_markup_open’, 5);
remove_action(‘genesis_header’, ‘genesis_header_markup_close’, 15);
function custom_header() {
?>
<a href="” alt=””>
<?php }
add_action( 'genesis_before', 'custom_header' );
I hope it will help someone else.
Yep, removing/adding the markup is the key!
hey Carrie, love your tutorials!
Being a year old post, it appears this solution no longer works.
I’m using the most recent version of both Genesis and Prose and attempting to create a full-width header to drop a dynamic slider plugin into.
I’ve plugged these functions into the custom functions area of the custom code editor.
To no avail…
The closest response I got was getting the navbar to appear at the top of the page, above the header, apparently outside the wrap.
The header remained within the wrap, as well as a repeating navbar under it.
The site is clean, no content, fresh install, all default settings.
The only thing that has been altered is attempting to implement the code from your tutorial.
Any ideas how to pull this off using the new versions of Genesis and Prose?
PS: CSS minify is off.
Hi Zak,
Try this out this updated post.
Cheers,
Carrie
Hey Carrie, not quite the same problem, but I figured it’s worth a shot asking. We essentially want to add an additional header-like image above the top navigation menu in the Focus child theme (here’s an idea, where the red box is: http://oi41.tinypic.com/5aga5u.jpg ). Any idea how you would go about doing this? We are trying to add a new div that we could then play around with add the image to, but haven’t found anything to accomplish that so far. Thank you!
Hi John,
Yeah, if there’s a div available in that spot, you could use a background style to insert your image. Otherwise, you could add a widget area up there (something like this) and add your image that way.
Cheers,
Carrie
Awesome, the link you posted worked for us! Thank you very much!
So I am trying to remove the header , footer widget area and footer from my “newsletter” post. Using the Agency-Pro theme. Removing the header works fine, but the footer and footer widgets refuse to disappear. Thanks.
if (in_category(‘newsletter’)){
add_filter( ‘genesis_pre_get_option_site_layout’, ‘__genesis_return_full_width_content’ );
remove_action( ‘genesis_before’, ‘genesis_header_markup_open’, 5 );
remove_action( ‘genesis_before’, ‘genesis_do_header’ );
remove_action( ‘genesis_before’, ‘genesis_header_markup_close’, 15 );
remove_action( ‘genesis_before_footer’, ‘genesis_footer_widget_areas’ );
remove_action(‘genesis_footer’, ‘genesis_footer_markup_open’, 5);
remove_action(‘genesis_footer’, ‘genesis_do_footer’);
remove_action(‘genesis_footer’, ‘genesis_footer_markup_close’, 15);
Sounds like there’s some other code in the theme (or that’s been added) that’s impacting the footer location. Install the Genesis Visual Hook Guide to see where the footer is hooked in.
Apologies Carrie! It worked. User error on my part.