Infinity Pro – Add Extra Full Width Widget To Front Page 4

In response to a question from a member of the StudioPress community, this tutorial provides the modification steps to add a extra full width widget to the front page 4 section in the Infinity Pro child theme by Studiopress.

Firstly, here’s the default front page 4 section:

And here’s the modified section which includes a new widget added in the 2nd position which displays full width:

Demo Video

The demo video shows you the 2nd full width widget with icon added to the front page 4 widget area and how the widgets display when the screen size reduces on small devices.

Here’s the 2 steps required to add the new widget and make the entire widget area fully mobile responsive as seen in the above video:

Step 1 : Modify the PHP code on line 83 of the Infinity Pro themes front-page.php file like this:

'before' => '<div id="front-page-4" class="front-page-4"><div class="solid-section widget-area fadeup-effect"><div class="wrap">',

This removes the infinity_widget_area_class class for flexible widgets so we can now add custom CSS rules to add the 2nd full width widget.