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.

	<?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
	echo 'Hello World';

	// Display Footer
	get_footer();

by GitHub

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

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

view raw style.css hosted with

by GitHub

Here’s the sample output:

Practical example

	// 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' ),
	));

by GitHub

	<?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();

by GitHub

	/* 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;
	}

by GitHub

Thanks to: