So, since Genesis 1.6, and probably my favorite part of Genesis 1.6 is the theme support of genesis-structural-wraps. So now you can easily add wraps to the header, nav, subnav, inner, footer-widgets, and footer. 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. Have a look at this:
- #header > .wrap
- #nav > .wrap
- #subnav > .wrap
- #inner > .wrap, this is what we will be adding
- #footer-widgets >.wrap
- #footer > .wrap
Previously to add an #inner wrap, for example, you had to:
// 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');
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_theme_support( 'genesis-structural-wraps', array( 'header', 'nav', 'subnav', 'inner', 'footer-widgets', 'footer' ) );
The style changes
By default the sample child theme for genesis is boxed in a 960px #wrap that constrains all the elements inside to that width centering them on the page. Find #wrap in your sample child theme style.css around line 162.
Change:
#wrap {
background-color: #fff;
margin: 0 auto 10px;
width: 960px;
}
to:
#wrap {
background-color: #fff;
}
This will remove the contraint and allow our elements inside to span as far as we please.
Add styles for the wrap divs that is inside each our main div structures. This style will set each area to 960px width with the margin:0 auto; centering them on the page.
.wrap {
margin: 0 auto;
width: 960px;
}
NOTE: Can be more specific to each area by adding the id of each section before .wrap for example:
#nav .wrap { width: 900px; }
Will set the nav to be shorter than the other areas.
Find each main structural div and remove its width. The width we set for .wrap will handle this. Search for #header, #nav, #subnav, #inner, #footer-widgets & #footer and remove the width set for each.
Hope this will help you to make your theme more better. 🙂
