• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Carrie Dils

Carrie Dils

WordPress Developer, Consultant, and Instructor

  • About
    • Work with Me
    • Around the Web
    • Media Kit
  • Blog
  • Podcast
  • Web Development Courses
  • Freelancing Courses

Unwrapping Genesis: How to Move the Header and Footer

Originally published on July 5, 2012 by Carrie Dils 28 Comments
Last updated on June 12, 2016

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:

  • 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)

Filed Under: Genesis Framework, WordPress Tutorials

About Carrie Dils

I believe you can make a good living doing work that makes you excited to get out of bed every morning.

In addition to this blog, I host a podcast for freelancers, teach business courses at The Fearless Freelancer®, and teach WordPress and Front-end Development courses for Lynda.com and LinkedIN Learning. I'm also writing a book for freelancers.

Reader Interactions

Comments

  1. chase1797 says

    January 31, 2014 at 11:26 pm

    I would like to know how to remove the header and the navigation bar completely.
    I added in a 3rd party navigation bar, but now i have 2.

    Reply
  2. Heather Hess says

    March 8, 2014 at 10:08 pm

    Hi – I thank you in advance! I am trying to make a full width navigation menu on http://joanvidargas.com – I added the code you suggest on my very un-pretty test site – http://mariposamusings.com because I am afraid to touch Joan’s site until I know what I’m doing. Will Joan’s header automatically be full width when I add this coding?

    Heather Hess

    Reply
    • Carrie Dils says

      March 9, 2014 at 2:31 pm

      Hi Heather,
      I don’t know enough about Joan’s site to know. 🙂 I’d recommend duplicating her site in a local dev environment where you can test out changes before committing them live.

      Just published a post on editing WordPress sites you may find helpful…
      Cheers,
      Carrie

      Reply
  3. Heather says

    March 9, 2014 at 2:42 pm

    Hi – I am not a developer – I can do websites as long as clients don’t want me to do complicated coding designs.

    Would you please give me an estimate of what it would cost if you do it please. It seems like such an easy thing to make a full width navigation menu – but things are not always as they seem – especially in studio press.

    It’s just Metro Pro with a few changes that one of the developers connected with StudioPress did – I am thinking I should just put it back to the original template.

    Thanks – and happy Sunday!

    Heather

    Reply
    • Carrie Dils says

      March 9, 2014 at 5:09 pm

      Hi Heather,
      Give Jonathan Perez over at SureFireWebServices.com a shout via his contact form. He does fantastic work on StudioPress themes and can get you a quote for the work you’re needing.

      Cheers,
      Carrie

      Reply
  4. Crystal Craig (@justcrissyc) says

    August 3, 2015 at 12:39 pm

    I tried this, but the navigation didn’t move. I’m using the foodie pro theme. I want to make the entire header and navigation fixed so when you scroll down it stays at the top of the page, but getting the entire header and nav outside the wrap just isn’t working for me.

    Reply
    • Carrie Dils says

      August 5, 2015 at 2:51 pm

      Most likely the Foodie Pro theme has these functions hooked in different locations than I’m showing in this post. A stroll around functions.php in would probably reveal the answer.

      Reply
  5. Ataul Ghani says

    May 24, 2016 at 1:18 pm

    Nice trick. I loved it! Thanks you! 🙂

    Reply
  6. Erika says

    August 9, 2016 at 9:04 pm

    Awesome post! I was able to move my primary navigation outside my theme wrap! Yoohoo!

    Reply
« Older Comments

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Search

Heya, I’m Carrie Dils

Carrie Dils chillin at the beach

Articles

  • Business
  • Front-End Development
  • Genesis Framework
  • Mental Health
  • Web Accessibility
  • WordPress Tutorials

Things I Love ❤️

My Tech Toolbox

Favorite Business Books

Powered by
  • OfficeHours.FM
  • My Courses on LinkedIN Learning
  • The Fearless Freelancer®

© 2022 CWD Holdings LLC