How to add more footer widget areas in Genesis child theme

If you just started using Genesis framework for your WordPress websites you probably noticed that by default Genesis sample theme has three Footer widget areas.

Not every single website uses widget areas. And most of the time three widget areas are just enough. But what if you want four or five?

Luckily framework authors have thought about that. You can add more footer areas with ease. And you don’t need to worry about complicated CSS styling changes after adding or removing widget areas. Here’s how you do it all!

How to add additional Footer widget areas using Genesis framework for WordPress

In this example we’ll change default 3 footer widget areas to 4. And we’ll do all the changes directly from WordPress admin menu. No need for FTP managers or code editors. Yes, it is that simple.

Here how widget area looks like in the default Genesis sample theme:

I added Custom HTML widgets for example:

To add fourth widget area in Genesis-based WordPress theme you need to go Appearance >> Theme Editor, and open config -> theme-supports.php file.

Locate line with setting ‘genesis-footer-widgets’ (at the bottom of the config file) and change it’s value to 4. Don’t forget to click Update file button to save changes.

Since we’re already in Appearance >> Theme Editor page we’ll do another small change – we’ll update theme’s style.css file to show four footer widgets in a row instead of default three. So our new widget area will be responsive and will show up in the same way as default widgets.

So open the stylesheet (style.css file) in Theme Editor, and look for .footer-widget-area css code. You’ll find it at ~1710 line. If you want to find it much faster you may search for width: calc code using Theme editor’s search function.

To show 4 footer widget areas in a row you need to change line:

width: calc(100% / 3);

to:

width: calc(100% / 4);

One more thing before saving changes – don’t forget to update styling.css version number at the top of the css file to make sure that your browser loads the updated styling file instead of the older, cached file.

4 widget areas instead of 3 in Genesis footer

That’s it – now your Genesis framework-based theme will have 4 footer widget areas and it will automatically calculate the correct footer widget width to show them responsive and all in one row. Just go to Appearance >> Widgets, and add the content you want to show up there.

After adding content the new widget area will be styled the same as all the other widget areas.