How to Add Footer Widgets in Genesis Themes

genesis-theme-tutorials-thumbnailWidgetized footers on WordPress sites are really handy as it is a way to put some bottom of the site viewable content for visitors on your website. It is your last opportunity to convert visitors, outside pop-up notifications, re-directions to thank you pages, lead generation forms, and more. It also allows for organizing content to seem more balanced on your website’s design.

Not everyone has to have footer widgets on their website. However, for those wanting to use them, and are using the StudioPress Genesis framework, you can add them into your site. For example, if you see the image below, it is a screenshot of how my footer looks at the bottom of my website, for most pages.

genesis-widgetized-footer

This article is a tutorial on how to add a widgetized footer in Genesis Themes without a plugin.

How to Add Footer Widgets in Genesis Themes Without A Plugin

For this tutorial we are going to do 3 columns. Please note that you can do this with more columns, but you will have to adjust your CSS, adjust the code in this tutorial, and register more widgets in your theme’s functions.php template.

Note: This should work in ALL current Genesis child theme’s AND for ones you are building. Also, you should NOT be editing the Genesis framework. You SHOULD be creating a child theme when adding modifications to your site.

Genesis has by default a hook for footer widgets a built in code. To add theme support, you only have to put the following code into your functions.php:

Side note: This is referred to from the file called widgetize.php in the Genesis core under lib/functions/ and footer.php in lib/structure/

You can either choose to keep 3 widgets, or change the number 3 to whatever you like.

This code will register 3 widgets and product the code automatically because it is built into the core Genesis theme framework.

You can either choose to keep 3 widgets, or change the number 3 to whatever you like.

This code will register 3 widgets and product the code automatically because it is built into the core Genesis theme framework.

From there, you can customize the look via CSS.

However, you can also do it the long way by creating your own. Also, this part of the tutorial will help you understand the widget’s markup in order to customize with CSS or add other elements.

Side Note: CSS and filter for Genesis footer widgets are courtesy of Brian Gardner.

This is a very basic code that you can adapt for your own. If you wish to understand more on customizing your CSS for your footer widgets, you are more than welcome to view the source of my site and check out my style sheet for this theme.

The Long Way On How To Add Footer Widgets In Genesis Themes

I have found a lot of tutorials also mentioning that you should put the following code in your functions.php and creating a template. Please note that this is NOT necessary unless you are wanting to add specific markup (like HTML) to your footer widgets. Otherwise, you really do not have to put this code.

This is actually pulled and adapted from the Metric child theme for the Genesis framework.

This goes into the functions.php

Replace yourthemename with the name of your child theme. For example, in the Metric child theme, this function was called metric_include_footer_widgets

The following code basically gives the division layer (DIV) for the footer widgets, and designates each individual footer. This code goes in a separate file. We will use the footer-widgeted.php as according to the code given above.

Once you have created this file, you can load it to your theme’s files.

Again, this is NOT necessary. And if you do use this, you WILL have to register custom widgets as they have to coordinate with your footer widget names as specified in the code right above this paragraph. Include is filler text so you have some default words while you develop.

If you want to add more widgets, then you will have to add more markup. For example, with the code above, just 1 widget is:

If you do choose to go the long way in adding footer widgets, then your sidebar widgets should be registered as followed:

If you need to add more widgets, you will have to register another sidebar.

The last would be CSS in order to complete this. Again, if you need to add more sidebars, you just need to add more CSS classes to coordinate with the extra footer widgets. If you need In fact, you can use and adapt the CSS from the first tutorial. Keep in mind that the more widgets you do add, the thinner the widget will have to be coded.

How to Add Footer Widgets in Genesis Themes With A Plugin

Aside from using code, if you prefer to use a plugin, Genesis Widgetized Footer is an option. There are a few other plugins available, so you are welcome to search the WordPress Plugin Repository for Genesis footer widgets.

Do you use Genesis? Do you use footer widgets in your Genesis child theme? Which way do you prefer to add footer widgets?

Comments

  1. says

    Hello Nile,
    Great tutorial. I am not using Genesis yet. But I think I should go for a test drive now.
    Sharing this post for my friends.

    Regards,
    Amrik Virdi

    • says

      Hi Amrik! Genesis is definitely a framework I do recommend. Some developers have not gotten the fact that this is far easier to develop with than Thesis, and works naturally with the WordPress core. The great thing with their updates, is that they also have built in scripts and hooks to get your site looking more dynamic.

  2. says

    Hi Nile, I’ve started using Genesis on some of my blogs, I really like it. Right now, I’m working on trying to get a Genesis theme to look the same as one of my other Thesis blogs, that was heavily customized, but NOT mobile responsive. Thanks for the tutorial, it’s easy to follow!

  3. says

    I’ve been meaning to update the footer on our website & we’re on Genesis (really like it) so I’m going to very slowly use your examples and sample code to walk myself through the process. Thanks for providing so much detail – easier for those like me who are just starting out making changes to our sites.

  4. says

    Hi Nile..
    I liked this post because you show the html – I am a total doofus when it comes to html.. so this was very interesting to me. I have Genisis too . So, excellent post, very educational, thank you!

  5. says

    Hello Nile…..I am not using Genesis yet…..but your post has me ready to investigate it to see if I should be….I still struggle with things because I am very new to this stuff and don’t understand it very well….I maybe enlisting some advice from you to learn more…..I definitely Don’t know squat about the coding you have on your tutorial……But I do believe I could follow your instructions like a recipe and get this done ….If I was using Genesis!….I Just talked in a whole circle…..Thanks Nile ….Smokey

  6. says

    Good that my Woo came with the footer widgets. In today’s time, i feel the footer widgets are a must and do help in making the looks of the blog complete.
    Thanks for the article. Will definitely help if I consider to change my theme someday :)

  7. says

    I was try many tutorial for this but cant get success but using this tutorial i get it. You step by step tutorial make it easy . Thanks you so much for this tutorial

  8. says

    hello nile
    first time i am visiting your website. as i am not using genesis but one of my friends always face problem with this theme so reagrding footer so i will share this tutorial with them thnx for this nice tutorial
    regrds
    rajat kapoor

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge