How to add 4th widget to footer

First you’ll need to find this code in your functions.php file –

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

Then change the 3 to a 4

After you do this the 4th footer widget will appear on your widgets page as an option.

The only thing you’ll have to do is adjust your CSS and add the styling for the 4th widget. You’ll also need to shrink the 3 other widgets so they all can fit. You can look at what’s already in your Footer Widget section to see where everything is and what needs to be adjusted. And don’t forget the responsive CSS section as well.

I don’t see the .footer-widget-4 CSS anywhere. Did you add it in somewhere?

In the CSS you’ll need to make footer-widgets-1, 2, 3 all float to the left and share the same size, while footer-widget-4 is supposed to float to the right.

Footer 4 should also be added with the same width as footer 1, 2, and 3, but no margin-right would be needed since it’s floating to the right/end of the content area.

Let me know if that makes sense.

“Also, something strange is now happening. Under the footer widget titled “Travel Tips,” there is a space between the links “Travel Blog” & “Travel Insurance.” It wasn’t there before and i don’t see what could be causing that to happen.”

^ That will be fixed automatically once you add the footer-widget-4 code from the suggestion above. It’s just a floating issue since you added the 4th widget but don’t have the CSS added in to guide it in position. That’s why they are all showing up weird.

You’ll also want to add .footer-widgets-4, to the responsive section under line 2681 (960px width) so it shows up like the other 3 at 100% width when the browser is resized or viewed on mobile devices.

Add it to this section –

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

	.site-inner,
	.wrap {
		max-width: 768px;
	}

	.content,
	.content-sidebar-sidebar .content,
	.content-sidebar-sidebar .content-sidebar-wrap,
	.sidebar-content-sidebar .content,
	.sidebar-content-sidebar .content-sidebar-wrap,
	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.sidebar-primary,
	.sidebar-secondary,
	.sidebar-sidebar-content .content,
	.sidebar-sidebar-content .content-sidebar-wrap,
	.site-header .widget-area,
	.title-area {
		width: 100%;
	}

Before you do that, shrink your browser all the way and look at all the widgets so you can see what I’m talking about. Once you add the 4th one under the other 3 it should fix it.