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:
/**
* 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.