A Better Home Page

One of the great things about WordPress is the template hierarchy. Basically WordPress looks for certain templates by name under specific page loads. Confused? OK, I’ll give an example. When the first page on your site is loaded (the front page) WordPress goes through some checks to see what page is being requested then which page should be delivered, then which template to use. It goes something like this.

• URL request for front page of site
• Check Database options to see if static page should be loaded or the latest posts
• If Static Page check these templates in order, load first template found
  • front-page.php
  • Custom Page Template defined in page options
  • page-$slug.php
  • page-$id.php
  • page.php
  • index.php
• If Latest Posts check these templates in order, load first template found
  • font-page.php
  • home.php
  • index.php

You can see a really good info-graphic showing how all of this works in the WordPress Codex Article for the Template Hierarchy.

What does all of this have to do with a better home page?

Yep, you are one of those get to the point people. I can respect that. If you notice in the example I gave, front-page.php is the first file that WordPress looks for and the only file it looks for other than index.php for latest posts or a static front-page. Now, I often get asked in the forums “how can I keep the sidebars for the home page when I show a static page for my front page?” This question is especially prevalent in themes like Streamline 2.0 that show the latest posts below some custom home page sidebars.

Now you could create a custom page template and do all kinds of other jiggery things, or you can simply change the name of the home.php file to front-page.php.

If you do that with Streamline 2.0 (that is the theme I’m using on this site) and you select a static page for the front page, you will get the 4 custom sidebars to show up then the static page content. It’s like magic. Really sweet WordPress magic. mmmmmmmm

When should I use home.php

Well, I have heard that Otto of WordPress said never to use the home.php file. I don’t know if that is true. I tried finding the source but it doesn’t seem to be on his blogs or in the Codex. Admittedly, I only looked for like 10 minutes, but that is long enough to say I doubt he said “never ever under any circumstances use home.php.” Personally I think home.php makes sense in a few cases.

Fully Widgeted Home Page

If you are cutting out the standard loop completely I think you should use home.php. Otto might disagree with my on this point, but with the Genesis themes you are making your client/end user work harder if they want to switch to a static front page if you use front-page.php in this case. If you are putting the standard loop or grid loop in, then sure, use front-page.php, but if there is no way to show the static page content outside of a widget, use home.php. Then the users will have the expected usage of being able to show a static front page via the Reading Settings.

Customizing the Blog Page

There are times where you may want to customize the page where the latest posts are set to show. The home.php file will show on whatever page the latest posts are set to show on, so you can have a front-page.php or page template that affects a static page shown on the front page, then use the home.php file to create a template for the latest posts. This kind of scenario is something I do for clients when the need arises, but not something I have planned for any child themes. It is just the only other scenario where you really need a home.php file.

Well, there might be other times you want home.php files, but those are the two I can think of.

Better Home Page Code

While I have your attention, I get asked how to make a home page for Genesis all the time. So let’s do this thing. This page will have 3 sidebars above the content and sidebar and 4 sidebars under it. I’m only going to provide some super basic CSS, adapt the look to your needs.

Step One: Register Sidebars in functions.php file

Add this code to your child theme functions.php file. I’m registering 7 sidebars and quite frankly I want to make it as easy as possible to register a big group of them, so I’m using some fancy php to make it happen. You can certainly do it the old fashioned way as well.

$home_sidebars = array (
	'home-top-1'    => 'Home Top 1',
	'home-top-2'    => 'Home Top 2',
	'home-top-3'    => 'Home Top 3',
	'home-bottom-1' => 'Home Bottom 1',
	'home-bottom-2' => 'Home Bottom 2',
	'home-bottom-3' => 'Home Bottom 3',
	'home-bottom-4' => 'Home Bottom 4',
);

foreach( $home_sidebars as $id => $title ){
	genesis_register_sidebar( array(
		'id'          => $id,
		'name'        => $title,
	) );
}

You can also make the strings international if you need to localize it. That is a tutorial for another day though.

Making the better home page in front-page.php

Now that we have our 7 sidebars, it is time to call for them. First, make a front-page.php file and put it in the child theme directory. It goes in the same directory as the child theme style.css file. Edit the file to add this code

<?php

add_action( 'genesis_before_content_sidebar_wrap', 'child_front_page_before_content_sidebar_wrap' );
/**
 *  This function loads the three sidebars that will be used
 *  after the content and sidebar of the front page.
 */
function child_front_page_before_content_sidebar_wrap() {
    global $paged;

    if( $paged >= 1 )
        return;

    $home_sidebars = array (
        'home-top-1',
        'home-top-2',
        'home-top-3',
    );

    $wrap = '1';

    foreach( $home_sidebars as $id ){

        if( $wrap && is_active_sidebar( $id ) ) {
            echo '<div class="home-top">';
            $wrap = '';
        }

        genesis_widget_area( $id, array( 'before' => '<div class="'. $id . ' widget-area">' ) );

    }

    if( '' == $wrap )
        echo '</div><!-- end .home-top -->';
}

add_action( 'genesis_after_content_sidebar_wrap', 'child_front_page_after_content_sidebar_wrap' );
/**
 *  This function loads the four sidebars that will be used
 *  after the content and sidebar of the front page.
 */
function child_front_page_after_content_sidebar_wrap() {
    global $paged;

    if( $paged >= 1 )
        return;

    $home_sidebars = array (
        'home-bottom-1',
        'home-bottom-2',
        'home-bottom-3',
        'home-bottom-4',
    );

    $wrap = '1';

    foreach( $home_sidebars as $id ){

        if( $wrap && is_active_sidebar( $id ) ) {
            echo '<div class="home-bottom">';
            $wrap = '';
        }

        genesis_widget_area( $id, array( 'before' => '<div class="'. $id . ' widget-area">' ) );

    }

    if( '' == $wrap )
        echo '</div><!-- end .home-bottom -->';
}

genesis();

genesis() loads the framework and the two actions load the sidebars. I’m using loops for these since the code is being replicated. Because I want to only load the wrapping div if at least one of the sidebars is being used I use is_active_sidebar() to check it. The genesis_widget_area() function checks to see if the sidebar is active or not and will load the sidebar along with a wrapper div. In this case I told it to use the sidebar ID and widget-area as a class. The loop was left alone, it is a normal part of the genesis() function so the latest posts will show in the #content section if the reading settings are set to show the latest posts on the front page otherwise it will show whatever static page that is selected. It’s all super slick and down right pretty when you appreciate how simple the code is compared to what would be needed otherwise.

Style those widget areas

Right now if you use this code and don’t add any CSS it will display vertically, but we want 3 horizontal boxes at the top and 4 at the bottom right? So add this to your style sheet

/* Front Page
------------------------------------------------------------ */

.home-top,
.home-bottom {
    clear: both;
    overflow: hidden;
}

.home-top .widget-area {
    float: left;
    margin: 20px 2%;
    width: 29%;
}

.home-bottom .widget-area {
    float: left;
    margin: 20px 1%;
    width: 23%;
}

Now I have super simplified this to get it to work with pretty much any theme. To get borders and padding and other fancy stuff you will need to style it for that, but you also need to remember to adjust your width if you start fiddling with margins, padding, and borders.

This code can be adapted to pretty much any Genesis child theme and can be extended to include other sidebars, or even fewer sidebars fairly simply.