Add New Full Width Widget To Wellness Pro Front Page 1 Widget Area

This tutorial provides the code which enables you to add another widget to the front page 1 widget area in the Wellness Pro child theme by StudioPress.

This tutorial has ben written based on a question a member asked via Facebook messaging.

Hi there. I’m developing a site with the Wellness Pro theme. I am looking at the possible layout configurations for the front page widget areas. However, I need a configuration which isn’t there. See the following image to demonstrate what I need on one of the widget areas…

I need to have a title widget across the top of three equal width widgets below. Can this be done at all, please? Thanks again for your time.

We can simply add a new widget area before the front page 1 widget area like you see in the following screenshot :

Here’s the code modifications and additions which you need to follow.

Code Installation

There’s 2 steps :

Step 1 : Modify the front-page.php file in Wellness Pro so it looks like this :

Step 2 : Add the following CSS to the end of the style.css file and adjust accordingly :

.full-width .image-section .flexible-widgets .widget, 
.full-width .image-section .flexible-widgets .wrap {
    padding-bottom: 0;
    margin-bottom: 0;
}

.full-width .image-section .flexible-widgets.widget-full .widget_text {
    margin: 0 auto 0;
    max-width: none;
}

You can add the CSS to the css > style-front.css or style.css file in Wellness Pro.