Full Width Widgetized Homepage in Genesis Sample 2.6.0

This article provides the steps to set up a full-width widgetized front page (with fixed-width content) in Genesis running on Genesis Sample 2.6.0 and above based on this article from Bill Erickson.

Step 1

Let’s register 4 front page widget areas.

Add the following in child theme’s functions.php:

// Registers front-page widget areas.
for ( $i = 1; $i <= 4; $i++ ) {
    genesis_register_widget_area(
        array(
            'id'          => "front-page-{$i}",
            'name'        => __( "Front Page {$i}", 'genesis-sample' ),
            'description' => __( "This is the front page {$i} section.", 'genesis-sample' ),
        )
    );
}

Step 2

Create a file named front-page.php having the following:

<?php
/**
 * Homepage Template.
 */

add_filter( 'genesis_attr_site-inner', 'be_site_inner_attr' );
/**
 * Adds attributes from 'entry', since this replaces the main entry.
 *
 * @author Bill Erickson
 * @link http://www.billerickson.net/full-width-landing-pages-in-genesis/
 *
 * @param array $attributes Existing attributes.
 * @return array Amended attributes.
 */
function be_site_inner_attr( $attributes ) {

    // Add a class of 'full' for styling this .site-inner differently.
    $attributes['class'] .= ' full';

    // Add an id of 'genesis-content' for accessible skip links.
    $attributes['id'] = 'genesis-content';

    // Add the attributes from .entry, since this replaces the main entry.
    $attributes = wp_parse_args( $attributes, genesis_attributes_entry( array() ) );

    return $attributes;

}

// Displays header.
get_header();

// Displays front-page widget areas.
for ( $i = 1; $i <= 4; $i++ ) {
    genesis_widget_area( "front-page-{$i}", array(
        'before' => '<div class="front-page-' . $i . ' widget-area"><div class="wrap">',
        'after'  => '</div></div>',
    ) );
}

// Displays Footer.
get_footer();

Step 3

Add the following above the media queries in child theme’s style.css:

/* Front Page with Full-Width Sections
-------------------------------------------- */

.site-inner.full {
    max-width: none;
    padding: 0;
}

.site-inner.full .wrap {
    max-width: 1140px;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
}

.site-inner.full .widget-area {
    padding: 50px 0;
}

.site-inner.full .widget-area:nth-child(odd) {
    background-color: rgba(0,0,0,.03);
}

.site-inner.full .widget:last-child {
    margin-bottom: 0;
}

Step 4

Create a static Page titled say, Home and set it as static homepage at Settings > Reading.

If you wish to have the list of blog posts appear at /blog, create a static Page titled Blog (DO NOT apply the “Blog” Template to this Page) and select it as the Posts page.

Step 5

At Appearance > Widgets, drag your desired widgets into the Front Page 1, Front Page 2, Front Page 3 and Front Page 4 widget areas.