Tutorial • Add Widget Areas to News Pro Theme • VictorFont.com

A user writes:

Is it possible for me to achieve the following with the News Pro theme?
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
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' ),
) );

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:

<!--?php
/**
 * This file adds the Home Page to the News Pro Theme.
 *
 * @author StudioPress
 * @package News Pro
 * @subpackage Customizations
 */

add_action( 'genesis_meta', 'news_home_genesis_meta' );
/**
 * Add widget support for homepage. If no widgets active, display the default loop.
 *
 */
function news_home_genesis_meta() {

	if ( is_active_sidebar( 'home-top' ) || is_active_sidebar( 'home-middle-left' ) || is_active_sidebar( 'home-middle-right' ) || is_active_sidebar( 'home-center' ) || is_active_sidebar( 'home-middle-left-2' ) || is_active_sidebar( 'home-middle-right-2' ) ||is_active_sidebar( 'home-bottom' ) ) {

		// Force content-sidebar layout setting
		// add_filter( 'genesis_site_layout', '__genesis_return_content_sidebar' );
		//* Force full-width-content layout
		add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );

		// Add news-home body class
		add_filter( 'body_class', 'news_body_class' );

	}

	if ( is_active_sidebar( 'home-top' ) ) {

		// Add excerpt length filter
		add_action( 'genesis_before_loop', 'news_top_excerpt_length' );

		// Add homepage widgets
		add_action( 'genesis_before_loop', 'news_homepage_top_widget' );

		// Remove excerpt length filter
		add_action( 'genesis_before_loop', 'news_remove_top_excerpt_length' );

	}

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

		// Remove the default Genesis loop
		remove_action( 'genesis_loop', 'genesis_do_loop' );

		// Add homepage widgets
		add_action( 'genesis_loop', 'news_homepage_widgets' );

	}
}

function news_body_class( $classes ) {

	$classes[] = 'news-pro-home';
	return $classes;

}

function news_excerpt_length( $length ) {
	return 25; // pull first 50 words
}

function news_top_excerpt_length() {

	add_filter( 'excerpt_length', 'news_excerpt_length' );

}

function news_remove_top_excerpt_length() {

	remove_filter( 'excerpt_length', 'news_excerpt_length' );

}

function news_homepage_top_widget() {

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

}

function news_homepage_widgets() {

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

		echo '
<div class="home-middle">';

		genesis_widget_area( 'home-middle-left', array(
			'before' => '
<div class="home-middle-left widget-area">',
			'after'  => '</div>
',
		) );

		genesis_widget_area( 'home-middle-right', array(
			'before' => '
<div class="home-middle-right widget-area">',
			'after'  => '</div>
',
		) );

		echo '</div>
';

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

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

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

		echo '
<div class="home-middle-2">';

		genesis_widget_area( 'home-middle-left-2', array(
			'before' => '
<div class="home-middle-left widget-area">',
			'after'  => '</div>
',
		) );

		genesis_widget_area( 'home-middle-right-2', array(
			'before' => '
<div class="home-middle-right widget-area">',
			'after'  => '</div>
',
		) );

		echo '</div>
';

	}

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

}

genesis();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

<!--?php

/**

* This file adds the Home Page to the News Pro Theme.

* @author StudioPress

* @package News Pro

* @subpackage Customizations

add_action( 'genesis_meta', 'news_home_genesis_meta' );

/**

* Add widget support for homepage. If no widgets active, display the default loop.

function news_home_genesis_meta() {

if ( is_active_sidebar( 'home-top' ) || is_active_sidebar( 'home-middle-left' ) || is_active_sidebar( 'home-middle-right' ) || is_active_sidebar( 'home-center' ) || is_active_sidebar( 'home-middle-left-2' ) || is_active_sidebar( 'home-middle-right-2' ) ||is_active_sidebar( 'home-bottom' ) ) {

// Force content-sidebar layout setting

// add_filter( 'genesis_site_layout', '__genesis_return_content_sidebar' );

//* Force full-width-content layout

add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );

// Add news-home body class

add_filter( 'body_class', 'news_body_class' );

}

if ( is_active_sidebar( 'home-top' ) ) {

// Add excerpt length filter

add_action( 'genesis_before_loop', 'news_top_excerpt_length' );

// Add homepage widgets

add_action( 'genesis_before_loop', 'news_homepage_top_widget' );

// Remove excerpt length filter

add_action( 'genesis_before_loop', 'news_remove_top_excerpt_length' );

}

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

// Remove the default Genesis loop

remove_action( 'genesis_loop', 'genesis_do_loop' );

// Add homepage widgets

add_action( 'genesis_loop', 'news_homepage_widgets' );

}

function news_body_class( $classes ) {

$classes[] = 'news-pro-home';

return $classes;

}

function news_excerpt_length( $length ) {

return 25; // pull first 50 words

}

function news_top_excerpt_length() {

add_filter( 'excerpt_length', 'news_excerpt_length' );

}

function news_remove_top_excerpt_length() {

remove_filter( 'excerpt_length', 'news_excerpt_length' );

}

function news_homepage_top_widget() {

genesis_widget_area( 'home-top', array(

'before' =--> '

<div class="home-top widget-area">',

'after' => '</div>

) );

}

function news_homepage_widgets() {

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

echo '

<div class="home-middle">';

genesis_widget_area( 'home-middle-left', array(

'before' => '

<div class="home-middle-left widget-area">',

'after' => '</div>

) );

genesis_widget_area( 'home-middle-right', array(

'before' => '

<div class="home-middle-right widget-area">',

'after' => '</div>

) );

echo '</div>

}

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

genesis_widget_area( 'home-center', array(

'before' => '

<div class="home-center widget-area">',

'after' => '</div>

) );

}

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

echo '

<div class="home-middle-2">';

genesis_widget_area( 'home-middle-left-2', array(

'before' => '

<div class="home-middle-left widget-area">',

'after' => '</div>

) );

genesis_widget_area( 'home-middle-right-2', array(

'before' => '

<div class="home-middle-right widget-area">',

'after' => '</div>

) );

echo '</div>

}

genesis_widget_area( 'home-bottom', array(

'before' => '

<div class="home-bottom widget-area">',

'after' => '</div>

) );

}

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

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

}

Comments

Dattaraj Vidyasagar
November 17, 2018 at 5:53 am
Its a greatly written and highly elaborated post. Tons of thanks. It helped me a lot.
God bless you….!
mike
October 8, 2016 at 10:50 am
Thanks for your post.
It’s really helpful.
Can i share this on my webiste: http://www.zetarmold.com
Thanks
- Victor M. Font Jr.
  October 8, 2016 at 10:57 am
  Hi Mike,
  Thanks for asking to share the article. Please feel free to share it as long as you provide attribution to me and a link back to this site.
  Regards,
  Victor

Digital Business Strategists

Call Us Toll Free:

1-844-VIC-FONT (842-3668)

Add Widget Areas to News Pro Theme

About Victor M. Font Jr.

VictorFont.com runs on the Genesis Framework

Leave a Reply Cancel reply

Comments

About Victor M. Font Jr.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Leave a Reply Cancel reply

Comments

Attract New Customers Automatically for Free!

GET YOUR COPY!