A full width theme normally consist of the header, nav, content and footer areas that have backgrounds that span the across the entire window while the inner area with the actual content of each section stays centered on the page. This help creates a visual separation between each section and to some just ascetically pleasing.
To create this effect you usually have your main container to each section as well as a wrap inside to keep its contents centered. The main container is set to 100% width and the inner wrap to the width you’d like your site to be fixed at then centered with a #margin: 0 auto;.
The steps below will go over exactly how to create a full width genesis child theme using the sample child theme as a base.
Genesis Structural Wraps
Step: 1 The Genesis Theme Framework by genesis comes with a wrap class inside it’s header, nav, and footer. The content area with sidebar is also wrapped by a div with the id of content-sidebar-wrap. For you basic content sidebar theme these are all the structual wraps you would need, however if you are to use the content sidebar sidebar or sidebar content content or even content sidebar sidebar layouts you will find one the sidebars to be left out from a wrap with no way to keep it beside your content. In Genesis version 1.6 a new function was created to aid in fixing this issue.
Adding or removing wraps for that matter is as simple as an add theme support function by the name of genesis-structual-wraps. For the full width theme we will be adding a wrap div to the inner div. To do this simply copy the code below and add it to your child theme’s function.php.
add_theme_support( ‘genesis-structural-wraps’, array( ‘header’, ‘nav’, ‘subnav’, ‘inner’, ‘footer-widgets’, ‘footer’ ) );
this theme support function contains all the id’s of the divs you wish to add an extra div wrapping it’s content in an array. Genesis currently supports adding the wrap div to:
- header
- nav
- subnav
- inner
- footer-widgets
- footer
inner isn’t originally in the array and adding the add_theme_support() code above will add it. NOTE: To remove wraps for div simply remove the name from the array.
The style changes
Step 2: 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.
Step 3: 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 setion before .wrap for example:
#nav .wrap { width: 900px; }
Will set the nav to be shorter than the other areas.
Step 4: 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.
Step 5: Create your master piece.