Genesis: How to Add an Additional Wrap

If you’ve ever looked at the Visual Markup Guide for the Genesis Framework, you may have noticed that all of the main sections contain a div that wraps around the inner markup except the the ‘inner’ section. To give you a general idea of the structure I am referring to, have a look at this:

• #header > .wrap
• #nav > .wrap
• #subnav > .wrap
• #inner > .wrap, this is what we will be adding
• #footer > .wrap

Genesis has made it easy for us to add the additional wrapper by using hooks. All you need to do is open up the functions.php file in your child theme and add the following code. The code should be placed at the end of the file, just before the closing ?> if there is one.

// Add div.wrap inside of div#inner
function child_before_content_sidebar_wrap() {
    echo '<div class="wrap">';
}
add_action( 'genesis_before_content_sidebar_wrap', 'child_before_content_sidebar_wrap' );

function child_after_content_sidebar_wrap() {
    echo '</div><!-- end .wrap -->';
}
add_action( 'genesis_after_content_sidebar_wrap', 'child_after_content_sidebar_wrap' );

Amendment

The same result could also be accomplished by adding the following line to the functions.php file of your Genesis child theme. Thanks @GaryJ.

add_theme_support( 'genesis-structural-wraps', array( 'header', 'nav', 'subnav', 'inner', 'footer-widgets', 'footer' ) );

That’s really all there is to it. I hope this has helped someone.