Create Genesis Widgetized Homepages

The Genesis Framework is an outstanding tool for WordPress developers. It has many great child themes you can use to make your site look as unique as you are. You can even create your own unique theme relatively easily, but the framework is different from other WordPress themes in that it doesn’t use the same page template structure that other themes use.

When developing a Genesis site from scratch, you may want to create Genesis widgetized homepages the way themes like Altitude Pro or Digital Pro are set up.

This allows you to place widgets on your homepage to create the layout, rather than using the default WordPress page editor. This is a great way to showcase dynamic content, such as your latest blog posts, by using the Genesis Featured Posts widget. Using a widget allows your homepage to stay fresh as you add new content without having another page to edit.

How to Create Genesis Widgetized Homepages

The first thing we need to do is add support for our homepage widgets. To do this, we’re going to use the genesis_register_sidebar function.

function sd_genesis_home_widgets() {
    genesis_register_sidebar( array(
	'name' => __( 'Home Content Top ', 'genesis' ),
	'id' => 'hometop',
	'description' => __( 'Home Top', 'genesis' ),
	'before_widget' => '<div class="homecontent fixedtop">',
	'after_widget' => '</div>',
	'before_title' => '<h3 class="widgettitle">',
	'after_title' => '</h3>',
    ) );
}
add_action( 'widgets_init', 'sd_genesis_home_widgets' );

The above function creates a new widget area in your Appearance > Widgets page. This allows you to drag and drop widgets in the Appearance > Widgets admin page. It also sets some content before and after the widget, as well as the widget’s title.

If you want to register more than one widget for the home page, you would copy the genesis_register_sidebar function, and provide unique values in the first four lines (name, id, description, before_widget).

Next, we’re going to add a conditional check to our widget areas to make sure they only are inserted on the homepage.

function sd_home_page_widgets() {
    if ( is_front_page('') )
    genesis_widget_area ('hometop',
	array(
	    'before' => '<div class="hometop">',
	    'after' => '</div>',
	)
    );
}
add_action( 'genesis_before_content', 'sd_home_page_widgets' );

Again, if you are adding multiple widget areas to the homepage you would copy the genesis_widget_area function. Be sure the 'id' in your genesis_register_sidebar and the first part of genesis_widget_area are the same. In the example above, both are ‘hometop’.

If you are customizing the Genesis Sample Theme, you may need to remove the main content areas from your homepage. This will remove the content loop and the sidebar from your homepage.

//* Remove homepage content
add_action( 'genesis_before','remove_homepage_content' );
function remove_homepage_content() {
  if (is_front_page() ) {
    remove_action( 'genesis_loop', 'genesis_do_loop' );
    remove_action( 'genesis_sidebar', 'genesis_do_sidebar' );
  }
}

Finally, we need to style the widget area. In the example I’m working on, the widget area is a full width area, so there isn’t much to do in order to get it to fit. Just make sure it has a 100% width, then add other styles as necessary.

If you are adding additional widgets, you may want to organize them in some sort of grid layout. You can use the Genesis CSS column classes in the

you set when registering the widget areas.