How to adjust the footer widgets in any genesis theme
It’s not widely known, but the footer section of any blog or website has proven to be one of the most important and most clicked on areas of a website. We often see people not using the footer area of their site at all. Ignoring it completely and leaving it blank. We build most of our themes with a three column footer section, but since some viewers have loads of important information (newsletter subscriptions, social media site links, copyright, and e-book sales to name a few), we thought that we would teach you how you can create more footer widget areas in your theme.
Before you make any changes to your site, make sure that you back up your existing design. You can do this with a plugin (such as Backup Buddy or Vault Press) or by simply choosing to copy and paste your coding into a text document and saving it. Be sure that you have access to your hosting account or FTP information in case you mess up and need to fix an error.
First, let’s take a look at the typical coding of most of our themes. I’ll be using the Divine theme as an example for this tutorial, but it will work for any of our themes. From your WordPress Dashboard, you’ll want to click on APPEARANCE > EDITOR to take yourself over to the editing section of the site (depending on your hosting provider, you may have to do this via your hosting file manager or FTP component). Once you get there, click on the functions.php (this will probably also be listed as Theme Functions) file in the right hand column. Once you’re there, scroll down until you see this:
This is the default setting of the Divine theme. This is going to give you those three footer widgets that you see in the demo theme.
But, say you want to change it up and have four, five or six footer widgets. All you would need to do to activate that would be to change that number 3 to whichever number you prefer. Once you do that and click back over to your widget section, you’ll see that your footer widget sections have automatically been added. Once you’ve done that, you can add your widgets.
Now, wouldn’t it be great if that was all there was to it? Unfortunately, it’s not quite that simple. Because all of our themes are already coded to hold a certain number of footer widgets, you’ll have to make changes to the themes stylesheet if you decide you want more or less widgets in the footer section. Lucky for you, we’ve made it easy! Below you’ll find the CSS coding for up to six footer widget areas. All ready for you to copy and paste into your theme files!
Now all you will need to do to change out the coding for these footer widgets is to return to your CSS/stylesheet (if you’ve just changed your theme functions/functions.php file, then you’ll see stylesheet listed on the right hand side, under where your function files are; or if you’re in your dashboard, use the same APPEARANCE > EDITOR route and that will land you directly on your stylesheet).
Once you’re there, you can use your keyboard to search for the “footer-widgets” section and add the code above to that section.
Now, you’ll scroll down just a bit until you see the code that looks similar to whichever style footer widget area your chosen theme has by default (you’ll be able to tell by how many Footer Widget areas you have in your widget section or by the number that was there when you made the changes in your function file earlier). Once you identify that section, you’ll want to simply copy the code above for your chosen footer widget number and paste it in place of what is currently there.
Then simply click SAVE!
Our goal here at Restored 316 is to make sure that your theme truly becomes YOUR theme! We aim to create the most customizable themes we can so that you aren’t getting just another run-of-the-mill theme that everyone has. We want to allow you to create yourself using the tools we’ve tried to provide.
Please feel free to ask any questions if you have any issues! We look forward to seeing what you guys can do!
I have to say you provide the most clear tutorials for your themes. This was EXACTLY what I was looking for! Thank you so much for all your step by step directions.
Thank you so much Serena! When I started out with WordPress, I knew absolutely NOTHING about it, so I try to make sure that if I was reading these way back when, I would be able to understand! Thank you for your kinds words!! <3
Thank you Courtney,
Your are my savior, really save me from another sleepless night.
I had been trying to change my six footer widgets to three widget for almost 3 hours, none happened. Desperately I googled this and finally found you 🙂
Thank you so much, I had problem with my News Pro theme. Because it comes with 6-footer widget. The reason it does not fit properly widget. My problem was resolved with this tutorial.
Thank you! I’m so happy that this was helpful!
If you reduce this to one footer widget will that span the whole footer or still be a more narrow “column?”
Hey Tom! That will actually span the whole width of the footer unless you go in and make further modifications to the CSS to make it smaller.
Wow! This was exactly what I needed for our foodie blog. Thank you so much!!!
I have the Adorn theme with the standard one widget footer. I have made the adjustments for a three widget footer, and it went well (thank you so much!) except the three widgets are each spanning the entire footer space (in doing so they are “stacking” on one another). I would like to have the three widgets align next to each other instead of the said “stacking” (for lack of a better word) effect. The width is set to 33%, but it appears as if it is 100%. Any help is appreciated! Thank you so much! 🙂
I will need to see a link to see what is going on 😉
I’m sorry, it is http://www.southernbelleglitz.com. 🙂 Currently, I do not have it set up the way I want it, because it looks a bit off with the full width. However, I’ve put two text widgets in the footer widget area so that you can see what I am talking about.
Thank you so much!
Natalie, first and foremost… gorgeous site!! And second, I’m seeing the widgets at the bottom side by side. You may need to refresh your browser a few times to see the updated code that you added.
Thank you so much, Lauren! It’s all due to your beautiful theme! I tried viewing the website in another browser and it works just like you said (I’m now tidying it up in Chrome instead of Safari). 🙂 I apologize for the trouble! <3
Oh no problem at all! I’m happy to help!
Exactly what I was looking for, thank you! Just a consideration, you may find the CSS3 “flex” property is easier to work with rather than floating these elements.
Hi! Is it possible to remove the copyright paragraph at the bottom of the theme layout?
Or, is it possible to edit the HTML code for the site so that I may edit the copyright line on the bottom of the theme layout?
You sure can! We have a tutorial right here that explains how to do this.
Thank you so much, I had problem with my News Pro theme. Because it comes with 6-footer widget. The reason it does not fit properly widget. My problem was resolved with this tutorial….
You’re very welcome!
I was searching for this piece of cake thanks for sharing footer widget adjustment in genesis theme.
Ive tried to fix this but still isn’t working for me. I can adjust the numbers of widgets but still not showing side to side. Maybe you can help me? My website: http://www.iolie.nl
I recommend reaching out to your theme developer to see if they have code that is over-riding the Genesis settings.