Advanced Full width Widgetized Home page in Genesis Sample

This tutorial provides the steps to create an Advanced Full width Widgetized front page, similar to other child themes in the new Genesis Sample theme.

Prerequisite:

1. Create a /css/ and /js/ folder in your child theme if it is not there.
2. Create two files front-page.css in /css/ folder and front-page.js in /js/ folder.

STEP 1

Register a few widgets area in functions.php. Open child-theme/functions.php and add the following:

//* 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' ),
		'before_title' => '<h2 class="widgettitle widget-title">',
		'after_title'  => '</h2>',
	)
);
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' ),
	)
);
genesis_register_widget_area(
	array(
		'id'          => "front-page-5",
		'name'        => __( "Front Page 5", 'genesis-sample' ),
		'description' => __( "This is the front page 5 section.", 'genesis-sample' ),
	)
);

STEP 2

It is the time to display these widgets for the front page. Create a file name front-page.php and add the following: