Full Width Widgetized Front Page in Genesis

The new Genesis Sample is incredibly the best sample theme that can be used for any type of site. The minimal design, the inline logo, and mobile-first design make it perfect for everyone.

and if you still think it is not, then why we are? We are here to prove the above statement true, true and true.

In this article, we are going to learn about creating full-width Widgetized Front Page in Genesis Sample theme.

Before proceeding, make sure You have a static page for the front page is set on Your Reading Setting. If not,

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’ and select it as the “Posts page”.

Save Changes.

To know more about Reading setting, take a look at conditional tags and Front Page widgets in Genesis.

Now, we are ready to go. The steps are

1. Register Front Page Widgets
2. Display Front Page Widgets
3. Sprinkle Some Love

1. Register Front Page Widgets

The first thing we need to do is to register some widgets for the front page. Here we are registering 4 widgets. Add this snippet in your child theme’s functions.php

//* Register front-page widget areas in functions.php
genesis_register_widget_area(
	array(
		'id'          => "front-page-1",
		'name'        => __( "Front Page 1", 'genesis-sample' ),
		'description' => __( "This is the front page 1 section.", 'genesis-sample' ),
	)
);
genesis_register_widget_area(
	array(
		'id'          => "front-page-2",
		'name'        => __( "Front Page 2", 'genesis-sample' ),
		'description' => __( "This is the front page 2 section.", 'genesis-sample' ),
	)
);
genesis_register_widget_area(
	array(
		'id'          => "front-page-3",
		'name'        => __( "Front Page 3", 'genesis-sample' ),
		'description' => __( "This is the front page 3 section.", 'genesis-sample' ),
	)
);
genesis_register_widget_area(
	array(
		'id'          => "front-page-4",
		'name'        => __( "Front Page 4", 'genesis-sample' ),
		'description' => __( "This is the front page 4 section.", 'genesis-sample' ),
	)
);

2. Display Front Page Widgets

The second thing we need to do is to hook those widgets for front-page.php and display it. Create a file named front-page.php and add the following snippets.

<?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-width' for styling this .site-inner differently.
    $attributes['class'] .= ' full-width';

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

//* Display front-page widget areas
genesis_widget_area(
    'front-page-1', array(
    'before' => '<div class="front-page-1 widget-area"><div class="wrap">',
    'after'  => '</div></div>',
    ) 
);
genesis_widget_area(
    'front-page-2', array(
    'before' => '<div class="front-page-2 widget-area"><div class="wrap">',
    'after'  => '</div></div>',
    ) 
);
genesis_widget_area(
    'front-page-3', array(
    'before' => '<div class="front-page-3 widget-area"><div class="wrap">',
    'after'  => '</div></div>',
    ) 
);
genesis_widget_area(
    'front-page-4', array(
    'before' => '<div class="front-page-4 widget-area"><div class="wrap">',
    'after'  => '</div></div>',
    ) 
);

// Displays footer
get_footer();

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

3. Sprinkle Some Love

There is no dish without salt. Add some CSS to make it more beautiful. Add this to your style.css or custom stylesheet file

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

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

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

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

.site-inner.full-width .widget-area:nth-child(odd) {
    background-color: #f5f5f590;
}

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

Result:

Tweak as per your need.