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