• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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.

default home bottom widgets

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

home bottom middle widgets

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.

Reader Interactions

Comments

  1. grace says

    September 6, 2014 at 3:04 pm

    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!

    Log in to Reply
    • Brad Dalton says

      September 6, 2014 at 3:39 pm

      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.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.