Genesis Tutorials

Tips, Tricks, and How-tos for the Genesis Theme Framework

You are here: Home / Theming / Genesis Structural Wraps & Creating a Full Width Genesis Child Theme

Theming, Tutorial

Genesis Structural Wraps & Creating a Full Width Genesis Child Theme

by

Google+0

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.

Free Genesis Child Theme Download:

Comments

  1. Quick question. I am placing the navigation in the header and when I go to remove the primary nav using this hook:

    // Remove the Primary Navigation
    remove_action( ‘genesis_after_header’, ‘genesis_do_nav’ );

    all the content is being shoved to the right. This also happens when trying to remove it on the back end.

    any ideas?

  2. I’ve another question. how would one go about creating full-width sections similar to the way one might do it here: http://ntunemedia.com/#home_section ?

    It seems there should be a way with this one, but haven’t figured it out yet. it seems the #inner div is the only one we have to manipulate when creating a custom page. or is there way to create multiple full-width divs?

    thanks!

    ps. can you add the “subscribe to this blog” plugin so we can get an email/rss notification when a reply is here?

    • Check out the visual hook guide ( https://genesistutorials.com/visual-hook-guide )and check the radio button “Markup” beside the page title. This will show you the main div structure in conjunction with the hooks.

      Depending on above or below the main content I would use one the hooks below to input your full width areas.

      genesis_after_header
      genesis_before_footer

      And thanks for the suggestion with the plugin! installing that now.

  3. Hi Christopher,

    First of all, I really enjoy the visual hook guide you’ve posted.

    Personally I prefer the use of CSS to create a full width Genesis child them, but I’ve used the function to simply remove them all (except from the main #wrap which isn’t AFAIK within this function)

    Do you perhaps know if a similar function is available for the Genesis widget-wraps as well?

    Best regards,

    Cor

    • This could be accomplished through filtering genesis_register_sidebar with genesis_register_sidebar_defaults. By default the value for 'before_widget' is: 

      <div id="%1$s" class="widget %2$s"><div class="widget-wrap">

      You can filter this function and remove

      <div class="widget-wrap">

      . If you want I could whip some code up for you to copy and paste into your child themes function.php let me know. If you figure it out though make sure to drop back by and share how you went about it!

      • Hi Christopher, and thanks!

        Since more needed to be changed, I’ve decided to redo the Genesis sidebars instead, instead of adding a filter (meaning removing them, and adding a new one).
        If allowed, here’s a link to the (current) final result: http://klanten.24design.net/html5/

    • Definitely possible. Most would be just stylesheet changes but I may remove the sidebars at that width or just set the site to full width content. then again it really depends on what you will be doing with it. 520px sounds like embedding it into a Facebook tab; If so have done that several times and is 100% possible with the genesis framework. Good luck!

  5. I have another question. I’m fairly new to this and I don’t know what I’m doing. I followed the steps above and was successful in doing it with the nav bar and footer, I just can’t get the header image to take up the entire header section, and not just the center.

    • If it is an image you may need a larger image to take up the space you want it to, or have it repeat. Check out if it is repeating or large enough first and play with that. If can’t get it working leave a link to the site and I’ll check it out.

  6. Yeah I tried that. I can’t seem to make the top header go all the way across the screen. There must be something else in the css that’s not allowing it to. I dunno, I just knew about css two weeks ago. XD

    My site is http://www.sagoyism.com

    RIght now I just set the header as text and description because images make it look weird.

  7. Hi Christopher,

    Thanks for the article, I am having some trouble after removing the width tag.

    The content header and background is not centering. Any ideas on how I can fix this?

    Take a look; http://HomeBizCouple.com

    Thanks for any insights you can give!
    Rob

  8. Hello, I am trying to set up a full width nav bar with content centered on this development site:
    http://www.timsquires.com/flight
    The closest I can get is having the nav bar going full width, but the content sits way off to the left. I think your tutorial is pointing me in the right direction, but I can’t figure out what I’m doing wrong – would be grateful for your help. Many thanks, Tim

    • Hi Tim,
      On line 54 of your css file you will find:

      #nav .wrap {
width: 900px;
}

      simply change it to:

      #nav .wrap {
width: 900px;
margin: 0 auto;
}

      The margin: 0 auto; basically is taking the width of 900px and adding the same margin on the left and right to center it.

      Site is looking great by the way.

      • Thank you so much! I’ve really been stuck with that and I’m grateful for your help. Thanks also for your compliments regarding the site – also much appreciated. Many thanks, Tim

  10. Thank you for the great post. I have been learning Genesis Framework and your toturials are very helpful. I am looking forward to your TBA theme.

  11. Christopher
    Thanks for such an easy to understand tutorial. Sometimes it takes a different approach to help on understand things that come easy to others. I find your writing easy to follow and interesting to read. Thanks for taking the time to be so informative to those who are not tech savvy and are trying to understand how to use wordpress and genesis with customization. I look forward to reading more of your tutorials and learning how to fully utilize the powerful genesis framework. Execellent Tutorial!!!

  12. Thanks so much for the tutorial! I am a little confused on step 3. Where exactly am I supposed to add that? I don’t have a .wrap under any of those sections. I did a search, and it only appears 4 times. (all by something to do with my footer and footer widgets) Am I just supposed to go into each section and add that whole code in that section? Sorry if that’s a dumb question. I am REALLY new to this

    • April, you are very welcome.
      Each additional section will just be to further constrain the widths. If you are to inspect your site you will search that each the main sections of genesis have a wrap div inside. For example: 

      <div id="header">
     <div class="wrap">
          ...
     </div>
</div>

      <div id="nav">
     <div class="wrap">
          ...
     </div>
</div>

      <div id="footer">
     <div class="wrap">
          ...
     </div>
</div>

      adding the following CSS: 

      .wrap {
    margin: 0 auto;
    width: 960px;
}

      contrains the inside of each those sections to the set width, but allowing the outside container to span the full width.

      If there is a #footer .wrap { … } or the like for the other sections it should be fine to leave them. Only ones to be concerned of are if a width is set to #header { … }, #nav { … }, ect., without targeting its inner wrap class since that will constrain the entire width of the section.

      Let me know if this makes sense, if not I can create a little graphic when I have some free time to further explain.

  13. @Christopher, You Rock! I am a Genesis Newbie and this helped me so much. Simple once you understand it. Just working to wrap my mind around this framework. I am enjoying the new experience but people like you makes it so much more enjoyable. Thanks

  14. Hi Christopher,
    Is it possible through filters or hooks to move an element OUT of the main wrapper? Scenario: I’d like to apply a box-shadow to my main wrapper (960px wide), but would like my nav (full-width with no box shadow) to output before my header and outside the wrapper.

    I’ve repositioned my primary nav above the header but can’t figure out how to get it outside the main wrapper.

    Thanks for the breakdown in the post – you’ve greatly increased my understanding of page elements and wrappers!

  15. Hey Christopher,

    I’m having trouble installing this into my css. I’m trying to have my navigation bar, footer widgets, and footer extend to the sides of the page. And now I’ve messed up the columns of my footer widgets, nothing is centered, and the bars are only extended on the left side. I’m new to wordpress and I feel like I’ve gone so far into changing things that it’s hard to go back. Can you take a look at it and tell me what’s messed up in my coding?
    http://www.queenofmanifestation.com

    Thanks so much. I really appreciate it!
    Jen

    • You’re really close. Your theme seems to have an extra wrap around the contents of the site with a fixed width that needs to be removed. It’s called #innerwrap and can be found on line 158. Remove the width from here and add

      .wrap {
     margin: 0 auto;
     width: 980px;
}

      You’ll also want to center your header background by adding ‘center’ after ‘no-repeat’ or a line like 

      background-position:center;

      Let me know if this works for you.

      • Yay, thanks Chris!

        I got the navigation to extend to the full width of the page! BUT – everything is still left justified. Can you help?

        Thanks!
        Jen

  16. Thank you for all of your great tutorials!

    Is there a simple way to lock the footer to the bottom of the browser? My footer has a different background color and floats on larger monitors. I would like the footer to stay at the very bottom of the browser window regardless of the monitor height.

  17. I tried to do this with new sample theme and failed. I have my demo site on couponsnack.com (do checkthe top green nav which I want full width retaining the position of menus) where i just added the menu before header. I tried to follow your tutorial and also used firebug to find and replicate the process your explained to april in comments. It didn’t worked. I wonder what went wrong? :/

    • Not bad, almost got it.
      First, you’ll want to remove the #nav .wrap { width: %100; } since it’s making the containing area of the nav span the 100%, which will make the text go to each side of the screen. I didn’t go over this in the tutorial, but with backgrounds to span the entire width you’ll want to make sure they are on the section’s main div. So for example, your current nav the background is declared on #header .menu, you would want to remove it from here and set it to #nav. With it set on #header .menu it will be limited to the width of .wrap since it is constrained that area.
      I hope this makes sense.

      • Yes. It worked. 🙂

        Thanks a lot, your explanation made it so easy for me to change, I just checked my code once and there’s my result.

Trackbacks