Create Full Width Home Page In Any StudioPress Theme

Aug 7, 2014

—

This post for beginners answers this forum question with one solution:

I would like a full-width homepage in Lifestyle Pro without any sidebars. I want to remove the regular sidebar.

Go to Line 20 of the Lifestyle Pro themes front-page.php file and change the line of code from this:

// Force content-sidebar layout setting
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_content_sidebar' );

To This:

// Force full width layout setting
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

Here’s the before and after shots showing the difference after changing the code for the layout setting.

Content Sidebar Layout – Before

Full Width Layout – After

Notes

You can pretty much apply this solution to any StudioPress child theme.
This solution only works for themes using a front-page.php, home.php, index.php or other template file for the main page of the site.

Full Width Page Layout Settings

But wait! What if i’ve created a static page to use as the front page of my site using the reading settings?

Simply edit the static page and change the Layout Setting to full width which you’ll find underneath the editor:

Custom Full Width Home Page Widgets

This code creates a custom front-page.php which you can upload to your child themes root directory. The page includes 6 full width widget areas you can populate and style with anything you like including a full width video.

And here’s the result

Comments

8 responses to “Create Full Width Home Page In Any StudioPress Theme”

Muhammad

September 1, 2014

Thanks for the code. I’m just replace it on my Magazine pro child theme and it works like champ.

Log in to Reply
Yoli

August 27, 2014

Thank you for this kind sir. My issue is when I’ve converted the Magazine Pro theme in full width, the featured post widgets in the home top, middle, and bottom are still not full width. How would i convert it to be 3 columns so that it is full width as well?

Log in to Reply
1. Yoli
  
  August 27, 2014
  
  ok I’ve figured out how to create the 3 columns by amending
  .home-middle .featured-content .entry:nth-of-type(2n+1)
  and making it 3 instead of 2.
  
  The current issue now is the spacing between the stories. The widget doesn’t extend 100% leaving the 2nd and 3rd featured stories squeezed together. Any support would be appreciated.
  
  Log in to Reply
  1. Brad Dalton
    
    August 27, 2014
    
    I would use the code from one of the tutorials on this site or directly from a theme which displays the amount of columns you want.
    
    Or you could add 3 widgets online which is more flexible.
    
    You’ll find it easier to find a theme which already includes this and use that home.ph
    
    Log in to Reply
juana

August 11, 2014

hi Brad-

thanks for your post. I’m a beginner- and wondering, what is the difference by putting the code in the php file (1st option) and using the full page layout in the editor?

thanks

Log in to Reply
1. Brad Dalton
  
  August 11, 2014
  
  Depends on your theme but the second option includes full width widgets and the entire front page code.
  
  You will need to add the line of code in the first option to your front-page.php or home.php to see what it does.
  
  The second option produces what you see in the screenshot below the code if you use it with the sample child theme and populate the widget area’s with calender widgets.
  
  Log in to Reply
Martin williams

August 10, 2014

hello sir,, I logged in studiopress with my sister Sharon id..
It was me with the full body layout issue,, and thank you for your help.
however sir,

I wanted the entire width of a page, I think its 1200px…not the full page layout option, I will need to programmically do this..

Log in to Reply
1. Brad Dalton
  
  August 11, 2014
  
  Hello Martin
  
  Yes. Take a look at the code in the Centric Pro themes front-page.php file which displays full width.
  
  There’s also code at the end of this post which creates 6 full screen widget areas.
  
  I assume you want widget areas on the front page rather than the loop?
  
  Log in to Reply