How To Add A New Widget Area To Digital Pro Themes Front Page

Need to add more widget areas to your themes front page?

Generally there’s 3 steps.

Let’s take a look at how to add another widget area in the front page of the Digital Pro child theme by StudioPress.

Step 1

In front-page.php, copy the existing code which calls the genesis_widget_area function and make the widget i.d unique.

genesis_widget_area( 'front-page-4', array(
'before' => '<div id="front-page-4" class="front-page-3"><div class="wrap"><div class="flexible-widgets widget-area fadeup-effect' . digital_widget_area_class( 'front-page-3' ) . '">',
'after'  => '</div></div></div>',
) );

In the above example, we’ve copied the widget code for front-page-3 and changed it to front-page-4.

The code is then added directly below the code for the 3rd widget area in the front-page.php file, before the closing curly bracket around line 131.

Step 2

In functions.php, copy the code which registers a widget using the genesis_register_sidebar function and change the i.d so it matches what you use in step 1.

genesis_register_sidebar( array(
	'id'          => 'front-page-4',
	'name'        => __( 'Front Page 4', 'digital' ),
	'description' => __( 'This is the 4th section on the front page.', 'digital' ),
) );

In the above example, we’ve copied the code for registering the front-page-3 widget area and changed it to front-page-4 which matches the i.d in step 1.

The code can be added anywhere in the functions.php, after the opening php tag.

Step 3

Line 17 of front-page.php needs to be modified to include your new widget i.d like this:

if ( is_active_sidebar( 'front-page-1' ) || is_active_sidebar( 'front-page-2' ) || is_active_sidebar( 'front-page-3' ) || is_active_sidebar( 'front-page-4' ) ) {

Note: All 3 steps include the new widget i.d of front-page-4 which is unique.

Styling

In the above example, we’ve used the same class as front-page-3 so the styling for front-page-4 will be the same as front-page-3. To change the styling of your new widget area, simply change the value for the front-page-3 class. You can then add CSS to your style.css file to style your new widget area using the new class selector your new widget area generates.

Usage in Other Themes

You can use these 2 steps to add new widget areas to any child themes front-page.php file.

This tutorial is based on the following question from a member of the StudioPress Community:

Any idea how I can add a new widget area to the front page of Digital Pro theme. Currently there are three widget areas called Front Page 1, Front Page 2 and Front Page 3. I’d like to duplicate the Front Page 3 one more time (say a Front Page 4).