Beginner’s Guide for Genesis Framework and their Layout Options

It becomes essential for both the beginner and professional WordPress Developer to know more about the genesis framework. If you are a novice, then you should be aware of this great theme framework. But in the initial steps, they find problems in managing the Genesis framework on their WordPress site.

Therefore, we bring you the post that will help you to manage its layout. But before getting into this topic, it is important to understand the role of a framework.

Theme Framework

It is a vigorous WP theme, used to create a unique and customized WordPress site. It plays a big role in improving your WP themes, without losing your updated customizations.
In fact, it gives the flexibility to complete its developing process in a short period of time. And one of the effective and robust theme frameworks is the Genesis that integrates all the security, SEO and performance functions.

What is Genesis Framework?

Genesis is maintained by a group of elite developers from the Well-reputed marketing firm, StudioPress. It is one of the popular WordPress frameworks, used to customizing a WP theme and also allow you to add content at any location of your website.

In most of the situations, we use theme options panel and widgets tools to customize a WP theme. But with the Genesis, you can improvise your site’s theme without the loss of any updated customization. It has the ability to keep your website’s design and layout safe and secure. Genesis framework also gives you the flexibility to choose a layout that can make your site more compelling.

In order to insert a layout, you need to create a child theme for a Genesis framework because it is an empty picture frame and you will be required to fix a picture to the Genesis. Through this, you can insert a picture into an empty frame.

Most of the time, you lose custom’s styling option of your theme when you make customization to a WP theme. But by developing a child theme for your Genesis framework, you will easily make customizations and also save it to the WP theme.

Genesis Layout Options

There are two Genesis layout options available in the WordPress:

(a) The first option will enable you to unregister default layouts.
(b) Second will allow you to register new layouts.
But before these options, let us explore about the default genesis layout:


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

Step to unregister Genesis Layout Options

The genesis layout options provide excellent flexibility, but still many web developers do not support all the layout options. However, with the introduction of latest genesis v1.4 version, you can easily unregister some of the specific layouts quite easily and swiftly. If you want to unregister the particular layouts, then you need to use a genesis-unregister-layout (‘$layout’) function in the function.php of your child theme. The following function is used to unregister each layout:

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’ );

Step to Register Custom Layouts

You can also add the custom layouts to the genesis child theme. You can insert custom layouts by creating “top bar –content –bottom bar”. It gives you flexibility to choose your own custom genesis child theme that can match your needs.

If you want to register a custom layout, then you need to make a use of genesis_register_layout( $layoutid $args) function into the child theme’s functions.php file. The following coding is used to register a custom layout:

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

How to add Logic to New Registered Layout?

As you enter all the code, you will see an option for the custom registered layout which is added along with the id name on the body tag. After that, you need to create a conditional for the custom layout, using the genesis_site_layout() function into your child theme’s functions.php file.

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 coding is complete you can add the custom genesis layout options into your child theme of genesis framework. Hopefully, beginners will not find any difficulty in managing the layout options of the genesis framework after reading this blog.

Author Bio: Lucy Barret has achieved great heights while working as a Sr. WordPress Developer at WPGeekd. She has successfully handled every major WordPress Web Development projects and achieved the goal of 100% client satisfaction.