Infinity Pro: Use 1 Full Width Footer Widget Instead of 3

A member of the StudioPress forum has asked how to use Footer Widget 1 as a full-width widget eliminating Footer Widgets 2 and Footer Widgets 3.  Below are the instructions to accomplish this.

Open up the functions.php file located in your Infinity Pro theme folder. Look for the following code around line 253 if you have not modified your original file.

Replace this:

// Add support for 3-column footer widgets.
add_theme_support( 'genesis-footer-widgets', 3 );

with this:

// Add support for 1-column footer widgets.
add_theme_support( 'genesis-footer-widgets', 1 );

It will now look like this under Appearance > Widgets:

Update your Stylesheet:

Open up your stylesheet (style.css), also located in your Infinity Pro theme folder. Look for line 1749.

Change this:

.footer-widgets-1,
.footer-widgets-3 {
width: 30%;
}

to this:

.footer-widgets-1 {
width: 100%;
}

Then look for this below that around line 1754. Delete it.

.footer-widgets-2 {
padding-left: 4%;
padding-right: 4%;
width: 40%;
}

Next, you’ll want to remove Footer Widgets 2 and Footer Widgets 3 from the media queries (mobile) since you are no longer using them.

Scroll down to this:

@media only screen and (max-width: 800px) {

Remove .footer-widgets-2 and .footer-widgets-3, so the new code will look like this:

@media only screen and (max-width: 800px) {
.content,
.footer-widgets-1,
.header-image .title-area,
.js .genesis-nav-menu .sub-menu,
.js .genesis-nav-menu .sub-menu a,
.sidebar-primary,
.site-header .nav-primary,
.title-area {
width: 100%;
}

Scroll down a little further, look for this. Delete it:

.footer-widgets-2 {
padding-left: 0;
padding-right: 0;
}

Save your new file and clear you cache (if active).

Note: The footer widgets do not display on the home page by design. If you would like the footer widget to be displayed on the home page as well follow these instructions:

Open up the front-page.php file. Look for this around line 52. Remove it and the widget will be displayed.

// Remove site footer widgets.
remove_theme_support( 'genesis-footer-widgets' );

That’s it.

Did you find this blog or tutorial helpful? Buy me coffee!
Like my Signature? Get the Signature Widget for Genesis right here!