WP Smith

Creating WordPress & Genesis Websites Since 2010

  • Home
  • About
  • Services
  • Blog
  • Contact

Jun 28 2011

How to Add Genesis Child Theme CSS Wraps (Structural Wraps) Easily and Quickly

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. This is something I found myself doing A LOT! And I guess I wasn't the only one!

Previously to add an #inner wrap, for example, you had to:
[php]// 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');
[/php]

And this didn't work all the time. For example, customizing the Agency theme, it wasn't this simple. One still had to modify home.php and move a hook to make the wrap work appropriately (and I am sure that the Agency theme wasn't the only one!).

Now, it is one line of code:
[php]add_theme_support( 'genesis-structural-wraps', array( 'header', 'nav', 'subnav', 'inner', 'footer-widgets', 'footer' ) );[/php]

While this one line doesn't solve the Agency theme problem of adding a wrap, it does make adding wraps easier and simpler without any unnecessary extra code or failing to close a <div> tag at the wrong spot!

Written by Travis Smith · Categorized: Genesis

StudioPress Premium WordPress Themes     WP Engine Managed WordPress Hosting

What can I do for you!?

Custom Development

We develop plugins by determining both business/functional and technical requirements, following WordPress development best practices, and using agile methodology to ensure you get the best solution.

Consulting

Have questions? Need a reliable developer to consult? Please contact us today!

Customized Theme

We can customize your theme or child theme, or create a child theme for you based on your needs while enhancing the performance of every individual attribute.

Customized Plugin

We can customize your plugins, extend plugins (e.g., Gravity Forms, Jetpack, Soliloquy) based on your needs ensuring security, performance, and positive business impact.

Contact Us

About Travis Smith

As a WordPress enthusiast, developer, and speaker, Travis writes about what he learns in WordPress trying to help other WordPress travelers, beginners and enthusiasts with tutorials, explanations, & demonstrations.

Comments

  1. Bruce says

    June 28, 2011 at 8:01 am

    This is a great tip that I did not know about Genesis 1.6

    One question – how do you name the class with:

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

    Does it add structural wraps with a default div/class name?

    Thanks for the tip!

    Reply
    • wpsmith says

      June 28, 2011 at 8:23 am

      Hello Bruce,

      It only adds a wrap div markup (class=”wrap”) inside the declared markups #header, #nav, #subnav, #inner, #footer-widgets, #footer. This is most helpful with full screen, full-width designs.

      Thanks,

      Reply
  2. Jessica Dalen says

    July 17, 2011 at 6:43 am

    do you happen to know how to move the main navigation inside the header wrap?
    attempted this:
    // Reposition the Primary Navigation
    remove_action(‘genesis_after_header’, ‘genesis_do_nav’);
    add_action(‘genesis_header’, ‘genesis_do_nav’);

    in functions file but navigation is still outside the header wrap.

    http://www.hpbacontario.ca/ca/

    Would you be able to point me in the right direction? looking for help so that logo and nav can sit side by side…

    Reply
    • wpsmith says

      July 22, 2011 at 3:15 pm

      That’s interesting that the genesis_header didn’t place it inside the #header .wrap area. However, you may want to try this:

      // Reposition the Primary Navigation
      remove_action(‘genesis_after_header’, ‘genesis_do_nav’);
      add_action(‘genesis_header_right’,’genesis_do_nav’,1);

      This will move the primary nav into the header right area. The #1 will ensure that it is fired first ahead of any widgets or anything else you may want there. If you want it to fire later, then change the 1 to 12 (10 is the default).

      Reply
  3. Ross says

    March 10, 2013 at 11:43 am

    Hello,

    Thanks for sharing your knowledge, I am wondering if you have some experience with Genesis and WooCommerce… up until the latest release of WooCommerce I was using a plugin called Genesis Connect for WooCommerce and it worked beautifully, unfortunately there hasn’t been an update tot he plugin and child theme layouts are suffering.

    According to WooCommerce, you can manually fix this by following the directions here… http://docs.woothemes.com/document/third-party-custom-theme-compatibility/.

    The first option is a little difficult because there is no traditional page.php in a child theme given the Genesis framework, although the second option (i.e. hooks) is said to be a better choice regardless.

    Do you have the time to take a look and possibly fill in the blanks for the hooks method?

    Many thanks,
    Ross

    Reply
  4. Matt Miciula says

    January 2, 2015 at 4:48 am

    Thanks for sharing the code. This is exactly what I was looking for to quickly add style wraps.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Twitter
  • Facebook
  • LinkedIn
  • Google+
  • RSS

Copyright © 2025 � WP Smith on Genesis on Genesis Framework � WordPress � Log in