Add Widget Areas to News Pro Theme

A user writes:

Is it possible for me to achieve the following with the News Pro theme?

1. Add a Home Center widget area below the Home Left and Home Right which would cover the whole length of the above two widgets combined
2. Repeat the Home Left and Home Right widget just below the Home Center widget

Yes, not only is it possible, this is the same process to follow for any Studio Press theme.

First you need to register the widget areas. Add this to functions.php:

genesis_register_sidebar( array(
	'id'          => 'home-center',
	'name'        => __( 'Home - center', 'news' ),
	'description' => __( 'This is the center section of the homepage.', 'news' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-middle-left-2',
	'name'        => __( 'Home - Middle Left 2', 'news' ),
	'description' => __( 'This is the second middle left section of the homepage.', 'news' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-middle-right-2',
	'name'        => __( 'Home - Middle Right 2', 'news' ),
	'description' => __( 'This is the second middle right section of the homepage.', 'news' ),
) );

Next, you have to modify the home page. Open front-page.php and replace it with this code:

 '
',
		'after'  => '
',
	) );

}

function news_homepage_widgets() {

	if ( is_active_sidebar( 'home-middle-left' ) || is_active_sidebar( 'home-middle-right' ) ) {

		echo '
';

		genesis_widget_area( 'home-middle-left', array(
			'before' => '
',
			'after'  => '
',
		) );

		genesis_widget_area( 'home-middle-right', array(
			'before' => '
',
			'after'  => '
',
		) );

		echo '
';

	}
	
	if ( is_active_sidebar( 'home-center' ) ) {

		genesis_widget_area( 'home-center', array(
			'before' => '
',
			'after'  => '
',
		) );

	}
	
	if ( is_active_sidebar( 'home-middle-left-2' ) || is_active_sidebar( 'home-middle-right-2' ) ) {

		echo '
';

		genesis_widget_area( 'home-middle-left-2', array(
			'before' => '
',
			'after'  => '
',
		) );

		genesis_widget_area( 'home-middle-right-2', array(
			'before' => '
',
			'after'  => '
',
		) );

		echo '
';

	}

	genesis_widget_area( 'home-bottom', array(
		'before' => '
',
		'after'  => '
',
	) );

}

genesis();

Last you have to apply the CSS.

Find the classes for the home page in style.css around line 1287 and replace them with this:

/* Home Page
--------------------------------------------- */

.home-top {
	background-color: #f3f3f3;
	border-bottom: 1px solid #e3e3e3;
	clear: both;
	padding: 20px 20px 0;
}

.home-top .featured-content .entry-title {
	font-size: 30px;
}

.home-middle-left,
.home-middle-left-2 {
	border-right: 1px solid #e3e3e3;	
	float: left;
	padding: 20px 20px 0;
	width: 50%;
}

.home-middle-right,
.home-middle-right-2 {
	float: right;
	padding: 20px 20px 0;
	width: 50%;
}

.home-bottom,
.home-center {
	border-top: 1px solid #e3e3e3;
	clear: both;
	padding: 20px 20px 0;
}