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:
- Modify the CSS code in your style.css file
- Add PHP code to the end of your functions.php file to register the home bottom middle widget
- 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.
hello Brad!
I have been trying for hours and what I would like to do is switch the middle and bottom widgets: two middle widgets and one full-width bottom widget. apparently it’s not as easy.
any thoughts on how it could be done?
thank you!
That’s easily done really but not something i support via the comments.
If you want me to code it, please use the contact form.