NOTE: I did not add the responsive effect. You will take care about responsive effect.
Sharing the basic steps here:
Step 1: Enabling the Content Sidebar Layout option. Edit the functions.php file. Open the functions.php file on Notepad+ or navigate to Appearance > editor and click on functions.php link. Now modified the following codes:
Current Code:
//* Unregister layout settings 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' );
Replaced by this:
//* Unregister layout settings //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' );
Steps 2: Registering primary sidebar. Again you need to modify the functions.php file :
Current Code:
//* Unregister sidebars unregister_sidebar( 'sidebar' ); unregister_sidebar( 'sidebar-alt' );
Replaced by this one:
//* Unregister sidebars //unregister_sidebar( 'sidebar' ); unregister_sidebar( 'sidebar-alt' );
Step 3: Conditionally doing the force full width layout setup. Again edit the functions.php file
Current Code:
//* Force full-width-content layout setting add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );
Replaced by this one:
add_action( 'genesis_meta', 'gd_full_width_site_layout' );
function gd_full_width_site_layout(){
if ( 'content-sidebar' != genesis_get_custom_field( '_genesis_layout' ) ):
//* Force full-width-content layout setting
add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );
endif;
}
Step 4: Editing the style.css file. Again I am telling that I did not add the responsive css for content-sidebar layout. You personally take care it.
.content-sidebar .content {
float: left;
width: 72.09433962264151%;
}
.sidebar-primary {
background: #eee;
float: right;
width: 26.96226441509434%;
padding: 100px 0;
border-left: 1px solid #e2e2e2;
}
.sidebar-primary .widget{
padding: 0 40px
}
.sidebar-primary h4.widgettitle{
color: #333;
font-size: 28px;
}
