How To Add Or Remove Footer Widgets On Genesis Themes

Genesis WordPress themes typically come with three footer widgets installed. With a little bit of math and a simple edit to one line of code, you can modify the number of footer widgets. Not all site containers or ‘wraps’ have the same width. This tutorial breaks down how to calculate the CSS you will need to apply to those elements widths. If you’re not here for an explanation, skip ahead to the final code.

In the functions.php file change:

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

to

//* Add support for 4-column footer widgets
add_theme_support( 'genesis-footer-widgets', 4 );

Now When You Go Back To The Widgets Section You Will See…

That’s not all we have to do. We need to incorpoate CSS for the new widget .footer-widgets-4. And since the columns each have their own widths, we need to do update these values in the CSS accordingly.

Here’s what the CSS for three footer widgets looks like before we make any changes:

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
	width: 360px;
}

.footer-widgets-1 {
	margin-right: 60px;
}

.footer-widgets-1,
.footer-widgets-2 {
	float: left;
}

.footer-widgets-3 {
	float: right;
}

Now Let’s Do Some Math

In order to get the full width of the website’s container or ‘wrap’ you multiply the width of the footer-widgets by the number of footer-widgets, and then add the margin.

Then find a multiplier to obtain a new margin-right value.

Since there is 75% the amount of columns when there is 3 footer-widgets as opposed to 4, I will multiply the margin-right value by 75%.

Now I know that my new margin-right value will be 45px:

.footer-widgets-1 {
	margin-right: 45px;
}

To get the new width of the footer widgets I will subtract 45 from the total width of the wrap, and then divide by the new number of columns (4).

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.footer-widgets-4 {
	width: 273.75px;
}

Here Is The Final Code

Note the new width values and the added .footer-widgets-4 class.

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.footer-widgets-4 {
	width: 273.75px;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
	float: left;
}

.footer-widgets-1 {
	margin-right: 45px;
}

.footer-widgets-4 {
	float: right;
}

Don’t forget tweak your responsive CSS accordingly

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

    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3,
    .footer-widgets-4 {
        width: 100%;
    }

}

Does anyone do things differently? I’m looking forward to hearing about it in the comments!