Customize Genesis: Move Header Above the Wrap with Structural Action Hooks

Earlier I wrote a post about how to move the header and footer outside the structural wrap in a Genesis child theme. The instructions I laid out in that post didn’t apply to every single StudioPress child theme (not all themes fit the same structural mold). I’ve had multiple questions related specifically to moving the header in the Prose Child Theme, so here are the specifics on how to do that!

Default Structure of Prose

I like to use the Firebug browser plugin (available on Firefox, Chrome, or Safari) to see what’s going on with the HTML and CSS behind the scenes on a web page. Using it on the Prose theme, I can see that the default structure is this:

There’s the main wrap (id=”wrap”) and then we get the nav, header, inner, and footer widgets. Note that the footer div is already outside the main wrap. We don’t have to do anything to move it, but you can add some CSS to make it stretch the full width of the screen.

When we’re done with this tutorial, the header will be bumped up over the main wrap, like this:

Move Your Genesis Header Above the Main Wrap

We’re about to bust out with some Genesis structural action hooks. You ready?

For those of you that just want the code, here it is:

/** 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 );

If you’re using Prose, plop that in your Genesis > Custom Code > Custom Functions box. If you’re referring to this tutorial for a different Genesis child theme that doesn’t have a Custom Code menu option, then add this to your functions.php (or wherever you add custom code to your theme).

Let’s talk about WHY this code works.

The first three remove_action() hooks will unhook the header (and header markup divs) and get rid of the default Prose layout.

/** Ditch the Genesis header structural markup and the header code*/
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 ) ;

The last three remove_action() hooks will re-hook the header into your theme right after the opening tag (which also happens to be outside the main wrap).

/** Add in Genesis header structural markup and header code */
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 );

Okay, makes sense. But what’s up with those numbers at the end?? Read on.

Get your priorities straight

Those numbers we’re passing to our action hooks tell WordPress the order (or priority) to fire off our code. The default priority is 10 – lower numbers are executed earlier and higher numbers later.

The action hooks above are listed in order: 5, 10 (it’s a “silent 10”), and 15. This makes sure the code executes in the right order, first with genesis_header_markup_open, then sandwiching in our genesis_do_header code, and finally, wrapping it up with genesis_header_markup_close.

Bonus Code for Footer

Since the Prose theme places the footer outside of the main wrap, we don’t need to move it. BUT, if you’re reading this post and working with a theme that has the footer inside the main wrap and would like to move it below, you can try this:

/** Reposition footer outside main wrap */
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 ) ;

add_action( 'genesis_after', 'genesis_footer_markup_open', 5 );
add_action( 'genesis_after', 'genesis_do_footer' );
add_action( 'genesis_after', 'genesis_footer_markup_close', 15 );

These structural action hooks follow the same pattern as the code we used for the header. First we unhook the footer (and its markup) from the default location and then we hook it back in where we want it. If the concept of hooks and their location is new to you, I highly recommend taking a look at this visual hook guide. You can even install the Genesis Visual Hook Guide plugin to see hooks in action in your own theme.

Want to Learn More About Genesis Action Hooks?

I teach a course over at Lynda.com called Customizing Themes with Genesis for WordPress. In it, I dig into the Genesis Framework to explain how you can use action hooks to change your theme structure and behavior.  Interested in learning more? Start with the intro video below!

Watch the rest of this course (Lynda.com membership required)