I get asked this question a ton about the Tidy & Graceful themes. Everyone loves the home page formatting, but always wonders how they can add the sidebar to the home page as well. And actually, it’s so incredibly easy to do!
Before we get started and begin editing lines of code, please please make sure you have a backup of your theme files saved to your computer before making any edits. The last thing you want is to make a mistake and get the ‘white screen of death‘ and not know how to get back! So be sure to back it up!
Now… let’s get started!
Look in your front-page.php file for this code:
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
and change this to:
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_content_sidebar' );
That one itty bitty change will add the sidebar to the home page for you! However, when you do this, there are a couple little tweaks that need to be done to make everything work properly for each theme.
1. For the Home- Featured and Home-Welcome sections, since your space is now limited, it’s best to make these on top of each other instead of side by side. Look in your style.css file for:
.home-top {
background-color: #FFF;
float: left;
padding: 0;
width: 65%;
}
.home-welcome {
float: right;
width: 34%;
}
and change both of those width’s to 100%.
2. Next you’ll need to change the width of the slideshow images to 778px wide. You will do this under Genesis>Slider Settings.
3. Now we move down the page a bit to the Home- Middle Left and Home- Middle Right sections. The Home- Middle Left is perfect so we can leave that alone! We will just need to tweak the Home- Middle Right section a teeny bit.
In your functions.php file look for:
add_image_size( 'home-middle-right', 225, 75, TRUE );
and change this to:
add_image_size( 'home-middle-right', 348, 100, TRUE );
This will resize the images in this section to be a little longer since our space is now limited and not as wide as it was without the sidebar.
4. Once you’ve made that change above, you’ll need to regenerate all your thumbnails to be sure it crops all the images at the new size. You’ll install the Regenerate Thumbnails plugin and run it under Tools>Regen. Thumbnails. (make sure you’ve set up your slider at this point as well so it can recrop images to fit there as well!) Please note here that if you have a large number of images on your site, this process can take a while. I would recommend hitting the button and walking away for a while so it can do it’s thing!
5. Now instead of showing 5 posts in the Home- Middle Right section, I’m going to show 3. Again, this is just to fit the space better. I’m also not going to align them to the left. Here is a snapshot of my settings:
6. And lastly, for the Home- Bottom section, I’m just going to change my content limit from 350 to 200. See all my settings below:
And here is a full screenshot of what Tidy looks like with all the changes above and with the sidebar on it! Completely changes the look of just one theme with just a few easy steps! Oh.. and not a single line of code has to be edited to make it work on mobile responsive.. it will still look gorgeous!