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: