Whether you’re a beginner or a seasoned WordPress developer, you probably would have heard about the WordPress theme framework such as Genesis. In case you’re a novice, then you would certainly like to know, “Why you should use a theme framework?”. It’s because it help us upgrade WordPress themes without losing your customizations. Besides this, they even help reduce the development time to a great extent. Although, you can find several theme frameworks out there, but in this post we’ll be talking about Genesis only.
Beginners may find managing the Genesis theme framework a bit hard in the initial stages. To help you out, in this post I’ll show you how you can manage the layout of the Genesis framework. But, before that it’s important that you should know exactly what Genesis means.
An Overview of Genesis
Genesis is the most popular theme framework created by the team at StudioPress, a well-recognized marketing company. When it comes to customizing a theme, we’re often stuck with using theme options panels and widgets areas. However, Genesis provides a hook system, allowing to insert content at any website location.
In nutshell, this framework provides better control over the look and feel of your website, compared to what WordPress ‘options theme panel’ and ‘widgets’ can provide. It helps add flexibility to any WordPress websites in no time. One such flexibility that Genesis offers is the ability to choose a layout.
For example, let’s say you don’t require a content/sidebar layout and replace it with any 3 column layout or vice versa.
When it comes to adding a layout, you’ll need to create a child theme for your Genesis framework. Wondering why? That’s because Genesis is like an empty picture frame. It’s pretty obvious, you’ll need to add a picture to it. A child theme is your missing picture.
Often when making customization to a theme, you may lose your theme’s custom styling options. However, creating a child theme for your Genesis framework not only help you in WordPress customization, but also save your customizations from being overwritten.
Genesis Layout Options: What Are They and How They Work?
Here we’ll discuss about two genesis layout options: one will allow you to unregister default layouts and the second one will let you register new layouts. But prior to that let us take a look at the default genesis layout:
• Content/Sidebar
• Content/Sidebar/Sidebar
• Sidebar/Sidebar/Content
• Sidebar/Content/Sidebar
• Sidebar/Content
• Full Width Content
How to Unregister Genesis Layout Options?
Although, the genesis layout options that we had discussed previously offers great flexibility, but many developers didn’t liked the idea of supporting all the layout options. Fortunately, the latest genesis v1.4 version allows to unregister specific layouts in a pretty straightforward manner. To do so, you only need to make use of the genesis_unregister_layout( ‘$layout’) function in your child theme’s function.php. This function can be used to unregister each layout, as listed below.
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’ );
Apart from unregistering specific layouts options, you can also get rid of the in-post and archive layout options.
remove_theme_support( ‘genesis-inpost-layouts’ );
remove_theme_support( ‘genesis-archive-layouts’ );
How to Register Custom Layouts?
While you can choose to remove support for specific layouts of the Genesis child theme, you can also add custom layouts to it. Here, I’ll be showing you a working example on creating “top bar – content – bottom bar” layout. You can, however, choose to create any custom layout for the genesis child theme you want.
In order to register the custom layout, you’ll need to use the genesis_register_layout( $layoutid, $args) function in your child theme’s functions.php file.
genesis_register_layout( ‘topbar-content-bottombar’, array(
‘label’ => ‘Topbar/Content/Bottombar’,
‘img’ => CHILD_URL . ‘/images/img1.gif’,
) );
As you can see in the code, the function contains an array that is passed two arguments: label (that is used to define the name of layout) and image (that needs to utilized on in-post layout options)
Adding Logic to New Registered Layout
Once the code gets executed, you’ll notice that an option for the custom registered layout is added along with a class name on the body tag (that contains an id of your new cutom layout). However, till now your sidebars don’t have any logic attached to it.
Here, we’ll be creating a conditional for the custom layout using the genesis_site_layout() function. Make sure to add this function in your child theme’s functions.php file, that looks something like:
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’ );
}
}
Once the code is complete, in order to call the sidebars you’ll first have to create them. The following code will help to create two files for our sidebar: sidebar-top.php and sidebar-bottom.php.
Code snippet for sidebar-top.php:
Code snippet for sidebar-bottom.php:
Now, you’ll have to place the newly created sidebars into their hooks. For doing so, add the following code in your child theme’s function file:
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! Hopefully, you will now have good understanding of how you can make manage the layout options of your genesis framework child theme.