Front Page Template for Full Width Sections in Genesis

The current trend with most website homepages these days is full width sections going from edge to edge of the browser between the header and footer.

Bill Erickson has an excellent post on this topic here. In this article I would like to share my custom front-page.php based off of Bill’s code.

This template takes care of adding the itemprop="mainContentOfPage" and role="main" schema markup to div.site-inner.

Also we are removing the .site-inner’s wrap.

add_filter( 'genesis_attr_site-inner', 'sk_attributes_site_inner' );
/**
 * Add attributes for site-inner element.
 *
 * @since 2.0.0
 *
 * @param array $attributes Existing attributes.
 *
 * @return array Amended attributes.
 */
function sk_attributes_site_inner( $attributes ) {

	$attributes['role']     = 'main';
	$attributes['itemprop'] = 'mainContentOfPage';

	return $attributes;

}

// Remove div.site-inner's div.wrap
add_filter( 'genesis_structural_wrap-site-inner', '__return_empty_string' );

// Display header
get_header();

// Content
echo 'Hello World';

// Display Footer
get_footer();

/* Front Page Template for Full Width Sections
-------------------------------------------- */

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

functions.php

// Register widget areas
genesis_register_sidebar( array(
	'id'            => 'home-featured',
	'name'          => __( 'Home Featured', 'themename' ),
	'description'   => __( 'This is the homepage featured section', 'themename' ),
));

genesis_register_sidebar( array(
	'id'          => 'home-strap-text',
	'name'        => __( 'Home Strap Text', 'themename' ),
	'description' => __( 'This is the home strap text section.', 'themename' ),
));

front-page.php

add_filter( 'genesis_attr_site-inner', 'sk_attributes_site_inner' );
/**
* Add attributes for site-inner element.
*
* @since 2.0.0
*
* @param array $attributes Existing attributes.
*
* @return array Amended attributes.
*/
function sk_attributes_site_inner( $attributes ) {

$attributes['role'] = 'main';
$attributes['itemprop'] = 'mainContentOfPage';

return $attributes;

}

// Remove div.site-inner's div.wrap
add_filter( 'genesis_structural_wrap-site-inner', '__return_empty_string' );

// Display header
get_header();

// Content

// Display Home Featured widget area
genesis_widget_area( 'home-featured', array(
'before' => '<div class="home-featured widget-area">',
'after' => '</div>',
));

// Display Home Strap Text widget area
genesis_widget_area( 'home-strap-text', array(
'before' => '<div class="home-strap-text widget-area"><div class="wrap"',
'after' => '</div></div>',
));

// Display Footer
get_footer();

style.css

/* Front Page Template for Full Width Sections
-------------------------------------------- */

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

.home .site-inner .widget-area {
	padding: 40px 0;
}

.home .site-inner .home-featured {
	padding: 0;
}

.home-featured .soliloquy-container {
	margin-bottom: 0 !important;
}

.soliloquy-container .wrap {
	margin: 0 auto;
	padding: 40px;
	line-height: 1.3;
}

.home-strap-text {
	text-align: center;
}

.home-strap-text .button {
	margin-top: 20px;
}