Add Home Bottom Middle Widget To Lifestyle Pro Theme

By default the Lifestyle Pro theme by StudioPress includes 2 home bottom widgets, left and right.

In this tutorial, we’ll add a home bottom middle widget so there’s 3.

There’s 3 steps involved:

1. Modify the CSS code in your style.css file
2. Add PHP code to the end of your functions.php file to register the home bottom middle widget
3. Replace all the PHP code in your front-page.php file with new code which includes the new widget.

Child Themes Style Sheet

Change the code between Lines 1104 & 1114 of your child themes style.css file to this.

.home-bottom-left,
.home-bottom-middle,
.home-bottom-right {
margin: 0 1%;
width: 31.3333333%;
}

.home-bottom-left,
.home-bottom-middle {
	float: left;
}

Child Themes Functions File

Add this PHP code at the end of your child theme functions.php file:

genesis_register_sidebar( array(
	'id'          => 'home-bottom-middle',
	'name'        => __( 'Home - Bottom Middle', 'lifestyle' ),
	'description' => __( 'This is the bottom middle section of the homepage.', 'lifestyle' ),
) );

Child Themes Front Page Template

In your child themes font-page.php file, replace all the code with this code:

Note: Please copy the code from the view raw link and paste it at the end of your child themes functions.php file using a text editor like Notepad++

You will also need to modify the CSS in the Media Queries section of your style sheet so your new widgets re-size correctly on smaller devices.