Free Tips & Tricks!

Join the others who've found my articles helpful! Get free goodness delivered to your inbox each time I share something new.

p.s. I'd gnaw my arm off before selling your email address.

Unwrapping Genesis: How to Move the Header and Footer

July 5, 2012 by 11 Comments
Since publishing this post, I’ve written an updated post explaining how to use structural wraps to move the header, specifically in the Prose Child Theme. You may find it helpful.

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:

full width demo

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:

default structure of Genesis Child Theme

We want to move the header and the footer so that our structure looks like this:

custom structure

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:

Comments

  1. Dave says:
    August 27, 2012 at 3:33 pm

    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?

    Reply
    • Carrie Dils says:
      August 28, 2012 at 6:53 am

      Which theme are you using?

      Reply
    • Carrie Dils says:
      August 28, 2012 at 11:22 am

      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

      Reply
  2. Lucy says:
    September 5, 2012 at 11:23 pm

    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 …

    Reply
    • Carrie Dils says:
      September 6, 2012 at 6:09 am

      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?

      Reply
  3. Andy says:
    November 3, 2012 at 6:50 am

    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

    Reply
  4. Ken says:
    November 18, 2012 at 3:21 pm

    /** 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.

    Reply