Understanding Genesis Layout Options

One of the ways genesis adds to its flexibility is having the option to choose a layout. This is great for anyone who doesn’t want a content/sidebar layout and would prefer possibly a 3 column layout like sidebar/content/sidebar or vice versa. Also for designers it’s possible to add classes to the body or post at post/page level to add even more flexibility in the design of the site. One use for the body class could be having several backgrounds pre-added to the stylesheet of your site and depending on the body class you can call a different images or color for each post. For example:

body.black {
     background-color:#000;
}
body.blue {
     background-color:#0000ff;
}
body.gray {
     background-color:#aaa;
}

Say you have created the above styles in your child themes style.css file and want a specific post to have a gray background. In the post edit page scroll down to “Genesis Layout Options” box and in the text box under “Custom Body Class” add “gray”.

Once the page/post is saved the class gray will be added to the body and the style applied.

How to unregister the default genesis layouts and register new layouts.

By default genesis comes with 6 layout options to choose for the entire site or per post/page basis. The six layouts genesis support are:

  • Content/Sidebar
  • Content/Sidebar/Sidebar
  • Sidebar/Sidebar/Content
  • Sidebar/Content/Sidebar
  • Sidebar/Content
  • Full Width Content

Unregistering Genesis Layout Options

Having six layout options is great in terms of allowing flexibility but for some genesis developers it may be extra work to support each of the six. In the latest version of genesis v1.4 it is now possible to unregister specific layouts.

To unregister a specific layout out just use genesis_unregister_layout( '$layout') in your child theme’s function.php. See the list below for specific layouts.

genesis_unregister_layout( 'full-width-content' );
genesis_unregister_layout( 'content-sidebar' );
genesis_unregister_layout( 'sidebar-content' );
genesis_unregister_layout( 'content-sidebar-sidebar' );
genesis_unregister_layout( 'sidebar-sidebar-content' );
genesis_unregister_layout( 'sidebar-content-sidebar' );

In addition to being able to remove support for specific layouts you can also remove the in-post and archive layout options.

remove_theme_support( 'genesis-inpost-layouts' );
remove_theme_support( 'genesis-archive-layouts' );

Registering custom layouts for genesis child themes

Though removing support for layouts is nice, the 1.4 update also allows adding your own ( which I believe a useful feature that not many speak about or know about). Since layouts can be unregistered there must be a function to register them as well – and there is.


For example purposes I will be going over how to create a “top bar – content – bottom bar” layout, but you can really create any layout your heart desires and I may be release some files for other layout options.

Registering a custom layout

To register a new layout use genesis_register_layout( $layoutid, $args) in your child theme’s function.php. $args takes the label ( name of layout ) and image ( to be used on in-post layout options )
An example of this:

genesis_register_layout( 'topbar-content-bottombar', array(
	'label' => 'Topbar/Content/Bottombar',
	'img' => CHILD_URL . '/images/stcsb.gif',
) );

Creating the site layout logic and specific sidebars

Basically now, there will be an option for the new registered layout and a class name on the body tag with the id of your new layout. However, there will be no logic with the sidebars and by default both will show. For this layout replace the two default sidebars sidebar-alt and sidebar with topbar and bottombar.

To create a conditional for the new layout use genesis_site_layout() in your child theme’s function.php. This function checks both the custom field and the theme option to find the user-selected site layout, and returns it.

add_action('genesis_before', 'gt_new_custom_layout_logic');
function gt_new_custom_layout_logic() {

	$site_layout = genesis_site_layout();
	
	if ( $site_layout == 'topbar-content-bottombar' ) {
                // Remove default genesis sidebars
		remove_action( 'genesis_after_content', 'genesis_get_sidebar' );
		remove_action( 'genesis_after_content_sidebar_wrap', 'genesis_get_sidebar_alt');
                // Add layout specific sidebars
		add_action( 'genesis_before_content', 'gt_get_sidebar_top' );
		add_action( 'genesis_after_content_sidebar_wrap', 'gt_get_sidebar_bottom' );	
	}
}

Now once the code is set up, to call the sidebars you have to create them. First create two files for a sidebar sidebar-top.phpand sidebar-bottom.php.

For each these templates I set them up with their own hooks but you don’t have to ( I kinda just fell in love with hooks and like to use them where I see fit. And if this was built into a plugin having hooks for the user to interact with will save them from having to modify its code ).

sidebar-top.php:

<div id="sidebar-top" class="widget-area">
<?php
	do_action( 'gt_before_sidebar_top_widget_area' );
	do_action( 'gt_sidebar_top' );
	do_action( 'gt_after_sidebar_top_widget_area' );
?>
</div>

sidebar-bottom.php:

<div id="sidebar-bottom" class="widget-area">
<?php
	do_action( 'gt_before_sidebar_bottom_widget_area' );
	do_action( 'gt_sidebar_bottom' );
	do_action( 'gt_after_sidebar_bottom_widget_area' );
?>
</div>

Next build and get the sidebars to be placed into their hooks by putting this code into in your child theme’s function.php.

genesis_register_sidebar(array(
    'name'=>'TopBar',
    'description' => 'This is the top widget area on TCB layouts'
));
genesis_register_sidebar(array(
    'name'=>'BottomBar',
    'description' => 'This is the bottom widget area on TCB layouts'
));
// hooks into sidebar-top.php to add the widget area
add_action( 'gt_sidebar_top', 'gt_do_sidebar_top' );
function gt_do_sidebar_top() {

	if ( !dynamic_sidebar( 'TopBar' ) ) {
		echo '...';
	}

}
// hooks into sidebar-bottom.php to add the widget area
add_action( 'gt_sidebar_bottom', 'gt_do_sidebar_bottom' );
function gt_do_sidebar_bottom() {
	
	if ( !dynamic_sidebar( 'BottomBar' ) ) {
		echo '...';	
	}
	
}
// Lets get our beautiful hooked up sidebars. These functions are added
// into the child theme back up in the layout logic.
function gt_get_sidebar_top() {
		get_sidebar( 'top' );	
}
function gt_get_sidebar_bottom() {
		get_sidebar( 'bottom' );	
}

That’s it. Can really use this to register any layout you can dream up. For styling the new layout the id is added to body class so in this case in your style.css you can use body.topbar-content-bottombar to style anything differently on this layout. Below is some basic CSS to get you started.

.topbar-content-bottombar #content-sidebar-wrap {
	width: 960px;
}

.topbar-content-bottombar #topbar {
	margin: 0 0 15px;
	width: 960px;
}
.topbar-content-bottombar #topbar {
	margin: 15px 0 0;
	width: 960px;
	float: left;
}

Also here is the gif I created to use for the new layout: stcsb.gif

Comments

    • says

      Good day…I am an intermediate developer, more graphic design than coding – while this tutorial is pretty descriptive, I am having trouble implementing the code.

      Where in the funtions.php file should I be placing the register and conditional codes? And should it be grouped together like the following:

      // Additional Layout Options
      genesis_register_layout( 'topbar-content-bottombar', array(
          'label' =&gt; 'Topbar/Content/Bottombar',
          'img' =&gt; CHILD_URL . '/images/stcsb.gif',
      ) );
      add_action('genesis_before', 'gt_new_custom_layout_logic');
      function gt_new_custom_layout_logic() {
       
          $site_layout = genesis_site_layout();
       
          if ( $site_layout == 'topbar-content-bottombar' ) {
                      // Remove default genesis sidebars
              remove_action( 'genesis_after_content', 'genesis_get_sidebar' );
              remove_action( 'genesis_after_content_sidebar_wrap', 'genesis_get_sidebar_alt');
                      // Add layout specific sidebars
              add_action( 'genesis_before_content', 'gt_get_sidebar_top' );
              add_action( 'genesis_after_content_sidebar_wrap', 'gt_get_sidebar_bottom' );
          }
      }
      genesis_register_sidebar(array(
          'name'=&gt;'TopBar',
          'description' =&gt; 'This is the top widget area on TCB layouts'
      ));
      genesis_register_sidebar(array(
          'name'=&gt;'BottomBar',
          'description' =&gt; 'This is the bottom widget area on TCB layouts'
      ));
      // hooks into sidebar-top.php to add the widget area
      add_action( 'gt_sidebar_top', 'gt_do_sidebar_top' );
      function gt_do_sidebar_top() {
       
          if ( !dynamic_sidebar( 'TopBar' ) ) {
              echo '...';
          }
       
      }
      // hooks into sidebar-bottom.php to add the widget area
      add_action( 'gt_sidebar_bottom', 'gt_do_sidebar_bottom' );
      function gt_do_sidebar_bottom() {
       
          if ( !dynamic_sidebar( 'BottomBar' ) ) {
              echo '...';
          }
       
      }
      // Lets get our beautiful hooked up sidebars. These functions are added
      // into the child theme back up in the layout logic.
      function gt_get_sidebar_top() {
              get_sidebar( 'top' );
      }
      function gt_get_sidebar_bottom() {
              get_sidebar( 'bottom' );
      }
      

      Thanks in advance for your help…

      • says

        I am trying to create an alternate sidebar to the right of content. I’ve tried using the following code based on your instructions. I’m definitely a novice at this, but thought for sure I had it right. I’m getting an error at the end of the code. The new sidebar is sidebar_nxt and the name is ‘BlogBar’ bar because I’m only using it for the blog section of the site.

        genesis_register_layout( ‘sidebar-nxt’, array(
        ‘label’ => ‘Content/Blogbar’,
        ) );

        add_action(‘genesis_before’, ‘gt_new_custom_layout_logic’);
        function gt_new_custom_layout_logic() {

        $site_layout = genesis_site_layout();

        if ( $site_layout == ‘sidebar-nxt’ ) {
        // Remove default genesis sidebars
        remove_action( ‘genesis_after_content’, ‘genesis_get_sidebar’ );
        remove_action( ‘genesis_after_content_sidebar_wrap’, ‘genesis_get_sidebar_alt’);
        // Add layout specific sidebars
        add_action( ‘genesis_after_content_sidebar_wrap’, ‘gt_get_sidebar_nxt’ );
        }
        }

        genesis_register_sidebar(array(
        ‘name’=>’BlogBar’,
        ‘description’ => ‘This is the widget area for the blog section’
        ));
        // hooks into sidebar-nxt.php to add the widget area
        add_action( ‘gt_sidebar_nxt’, ‘gt_do_sidebar_nxt’ );
        function gt_do_sidebar_nxt() {

        if ( !dynamic_sidebar( ‘BlogBar’ ) ) {
        echo ‘…';
        }

        // Lets get our beautiful hooked up sidebars. These functions are added
        // into the child theme back up in the layout logic.
        function gt_get_sidebar_nxt() {
        get_sidebar( ‘after’ );
        }

      • Profile photo of Christopher says

        Ryan, Yup that how it should look. you can drop it in functions after

         require_once(TEMPLATEPATH.'/lib/init.php'); 

        at the top of the document but before ?> at the end of the doc ( If it exists ).

  1. says

    How do I set it so that Pages have full width – without it affecting the default right sidebar for general posts?

    • Profile photo of Christopher says

      you can use the genesis_pre_get_option_site_layout filter with a conditional for page like below.

      add_filter('genesis_pre_get_option_site_layout', 'gt_custom_page_layout');
      function gt_custom_page_layout( $opt ) {
          if ( is_page() )
          $opt = 'full-width-content';
          return $opt;
      }
      

      Just place the code in functions.php

  2. Rahul says

    I am not using the tabs widget and thus want to remove it from functions with hope of making genesis more fast. Can you please tell me the way to do so.

  3. Quan says

    how to customize the size of the sidebar. I want to use the Sidebar options / Content / Sidebar, width sidebar right = left sidebar.

  4. brooke says

    Thank you Christopher! You have no idea how much I appreciate this! I am completely new to WordPress & Genesis and I’ve spent hours researching with the best results coming from 2 of your posts! Can I make you some chocolate pastries of something? LOL.

  5. says

    I feel at a complete loss. I am trying to change the background image on a single page. I have attempted multiple suggestions, one of which was your custom body class suggested above. But it doesn’t work for me. I must not be getting something basic and obvious…

  6. says

    Wow… You blew me away again with this ever so easy to understand tutorial.

    Suggestion: Write an e-book or do some videos and sell them.. I am sure that people will buy them. Your writing style is so easy to follow. It makes sense to the non-developer person. I know that sounds funny, but this stuff is not rocket science. However, you are the first person that I have found that writes in such an easy way for a layperson to understand.

    I sincerely thank you for taking the time to share this valuable info on your website. Your hard work and attention to detail in helping the Genesis community understand the power of the framework is appreciated immensely.

    Gracias…

Trackbacks

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>