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:
1 2 3 4 5 6 |
//* 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:
1 2 3 4 5 6 |
//* 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:
1 2 3 |
//* Unregister sidebars unregister_sidebar( 'sidebar' ); unregister_sidebar( 'sidebar-alt' ); |
Replaced by this one
1 2 3 |
//* 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:
1 2 |
//* Force full-width-content layout setting add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' ); |
Replaced by this one
1 2 3 4 5 6 7 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.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; } |
S.O says
Hi! Can you help me make this work for me? I am using studiopress nosidebar and I really need that primary right sidebar. I get it up but it wont be responsive (go under content on phones)
Paul says
Hi
Thank you for contacting me. Share the WP-ADMIN access via contact form.
Best
Chinmoy
Scot says
Hi
I can’t get this to work as shown. If I remove the code as shown in Step 3, the sidebar simply won’t appear.
If I comment out Line 2 in Step 3 calling for the full-page layout the sidebar will appear, but it also appears on the front-page which is not desired.Thoughts?
Thanks
Paul says
I did not apply the above code on Home page. Are you wanting the sidebar on home page? What will be the design for home page? Right a banner is coming at top and bottom section have three columns grid view style for posts.
melinda says
Thanks for the great tutorials. I just discovered your site today and used a few of them successfully. However, this one isn’t working for me.
I am having the same problem at Scott.
I followed the code exactly as you have it outlined (however, there is an error is an error is step 4. You mention paste that code in functions.php when it actually goes into style.css. I placed it in style.css).
When I followed the above code, I do not see the sidebar anywhere.
If I comment out the code in line 5 above
add_filter( ‘genesis_site_layout’, ‘__genesis_return_full_width_content’ );
then I see the sidebar on the all pages – INCLUDING the home page. I do not want to see the sidebar on the homepage, just all other pages/posts.
Any advice? Thanks so much!
Paul says
Go to Genesis -> theme settings page and select the full-width-content layout.
Now edit the any post/page and select the “content-sidebar” layout from Genesis Layout Settings section. Click on update button and update the post/page. Now view the post and it will appear.