How to Add Widgets to the Headway Footer Block

A “widgetized footer” gives you the ability to add widgets to the bottom of your website, and automatically have them displayed on each page. Think of it as a horizontal widget area block, but you don’t have to keep adding it manually.

Creating a globally widgetized footer that appears automatically on each page is actually pretty easy. We just need to use headway’s hooks system. First, though, you need a child theme. Learn how to create one or download one from Headway101.

Demo Video

How to Create a Widgetized Footer with Headway Themes

The first thing we need to do is declare a widgetized area. This is done with the “register_sidebar” function from WordPress. Copy and paste the following code into your functions.php file:

//Define Widget Area
if (function_exists('register_sidebar'))
register_sidebar(array('name' => 'Footer-Widgets','before_widget' => '<div class="footer-item">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>'));

Using this function, you can see that we’ve named our sidebar “Footer-Widgets,” and assigned some classes to the actual widgets and the title for styling purposes. Next we need to call out the widget area in the footer block.

Copy and paste the following code into your functions.php file, below the first bit of code:

//Show Footer Widgets
function widgetized_footer() { ?>
<div id="footer-widgets">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer-Widgets') ); ?>
</div>
<?php }
add_action('headway_footer_open', 'widgetized_footer');

Here we’re using an action hook to stick our widget area into the footer block. We could easily swap “headway_footer_open” for “headway_wrapper_close” if you’re not using the footer block in your design.

Styling the Footer Widgets

To get the footer widgets to line up horizontally, we just need one line of CSS code. Copy and paste the following CSS into your child theme’s style.css file or the Live CSS editor:

body.custom div.footer-item {float: left; display: inline; overflow: hidden; width: 30%; padding: 10px;}

This code makes the widgets align to the left of the footer and then evenly sizes them to create 3-columns. You can mess with the width percentage and padding to add more columns if necessary.

Any Questions?

What questions do you have about creating a global widgetized footer in Headway?

About the Author: Corey Freeman has been working with Headway Themes since its first version in 2009. Hailed as a "professor of Headway," she helps users get the most out of their DIY websites.

Headway Themes Made Easy

Join the 347 members learning Headway Themes the easy way with Headway101. A video library, complete set of documentation, and exclusive members-only forum will be your tools to mastering headway. Get started today by clicking the "learn more" button.

47 Responses to How to Add Widgets to the Headway Footer Block

  1. Hi Headway101,

    I added the above code to install widgets in my footer in Headway 3.0 to my functions.php and live css editor.

    The widgets appeared, but the CSS is not impacting their appearance.

    Is this because I’m not using a child theme?

    – Katie

  2. I did exactly what you said, but when I add the css, it doesn’t change anything – the footer items stay vertical.

  3. My bad! I forgot the class in the PHP code >.< Use the updated code and you’ll be good to go.

    • You need to follow the steps in the tutorial to create a new footer, but the widget code can be applied there.

  4. Hi Corey,

    Great turorials :)

    I’m trying to get a fluid footer with widgets. I’ve followed your fluid header + footer tutorial and it works just fine, but can’t figure out how to display the widgets. I’m pretty sure I have to substitute the “headway_footer_open”, but I can’t figure out what write instead?

    Tune

  5. Thanks Corey,

    After a few trial and errors, I figured out how to do it. Next problem – how do I align the widgets with my content?

    Right now it they are floated all the way to the left, and since they are in the fluid footer that’s further to the left than the content.

    Tune

    • Never mind, I figured it out – just didn’t do exactly as you said in the fluid header/footer tutorial :)

      Thanks for the help!

  6. Hi Corey,

    I have got the footer widgets alright by following your instruction above here but they are appearing vertically oriented, instead of being shown across the width horizonally. I saw your reply to Adam as “My bad! I forgot the class in the PHP code >..< code!! I do not have much idea about coding. Could you please help..

  7. I am using a child theme. I added the css code to Live CSS Editor via Visual Editor as instructed. It is:
    body.custom div.footer-item {float: left; display: inline; overflow: hidden; width: 30%; padding: 10px;}

    I am using Headway 3.2.2

    • My bad again. It just says -div- where it should say -div class=”footer-item”-. I swear I’ve already fixed that O.o

  8. Corey,

    I changed the Live CSS code as:

    body.custom div class=footer-item {float: left; display: inline; overflow: hidden; width: 30%; padding: 10px;}

    But result is not changing. I also tried putting the footer-item word within double inverted comma and again, single inverted comma .. still the result is showing all widgets one above the other. Feeling jittery… please help!

  9. Hi Corey,

    Thanks for the excellent tutorials. Your webinars are also very helpful–you’re a great teacher!

    Related to this specific tutorial, I was wondering if it’s possible to add a div that wraps around all of the widgets that are added to the widgetized area. Each individual widget has a div, which is perfect, but it would be helpful to also have all 3 in another div.

    I placed my widgetized footer below the wrapper, so I’m trying to get the styling correct…

    Thanks,
    Marianne

  10. Hi Corey,

    I am trying to make a fluid footer after the wrapper using the hook ‘headway_after_wrapper’

    What I want to achieve is a main footer wrapper e.g thats fluid. Then have another inside e.g so i can center the widgets back into the center that then holds aka the separate widget items.

    I hope this make sense! I did give it ago but couldn’t figure out how to wrap the widget items as explained above

    I have purchased your Schematic Child Theme witch is great by the way and very handy!

    Hope you can help me out :)

  11. Ignore the last 2nd paragraph from my last comment I didn’t relise that the div tags wouldn’t display once I posted my comment.

    “What I want to achieve is a main footer wrapper e.g “div id=”footer-wrapper” thats fluid. Then have another “div” inside e.g “div id=footer-container” so i can center the widgets back into the center that then holds “div class=footer-item” aka the separate widget items.”

    • I updated the original post’s code, so you can see where you’d need to place the divs. Basically you’ll want to add one in addition to the one I’ve added, then use a different hook to move it outside the wrapper. Make sense?

  12. Hi Corey, I know this is not directly related to this tutorial but do you have any idea of how to add a link next to the Copyright eg. Copyright © 2012 Isoplus | Site designed by Fuze Graphics

    The bit after the | would be the link to my website.

  13. Hi Corey,

    thanks for the great tutorial! :)
    I have a question about styling the “footer-items” differently…this isn’t possible as long as all items have the same class (“footer-item”), right? I think I would need something like an automatic counter that adds an id to the css class “footer-item” (e.g. “footer-item-1″, “footer-item-2″..), but I have absolutely no idea how to realize this as I’m a total beginner in PHP. Any idea how I can realize this?

    • Every widget comes with its own ID and classes, so you should use those instead of the .footer-item class.

  14. mmh…maybe I did something wrong or I don’t get it :) I created a fluid footer (after the wrapper) and added your code to widgetize it. Then I added some text-widgets, which works properly. But my code looks like this and has no unique id, so that I could customize a single item:



    • I’m sorry, it doesn’t show the code here. I try it again:

      div id=”footer-widgets”
      div class=”footer-item”
      h2…/h2
      div class=”textwidget”…/div
      /div
      div class=”footer-item”
      h2…/h2
      div class=”textwidget”…/div
      /div
      /div

  15. Thanks a lot for this tutorial. I m not a developer and I was so confused how to manage different sections of my footer through admin and this tutorial really worked for me. Thanks a lot..! :)

  16. Corey, I’ve followed the instructions to the letter. I’ve redone it three times and I’ve tried placing the css in the child theme and the live css and I keep getting the same problem. When I activate the child theme and refresh the website, it alters my other widget’s.

    • You should find the other widgets in an “inactive widgets” tab. Switching from one theme to another, even to a child theme, can cause widget/menu weirdness.

  17. Corey, is this still applicable in 3.6? I’ve been building my site and adding a footer block, then just adding widgets through the interface. Is it advantageous (seo/responsiveness)to add the php code instead?

Never Miss a Tutorial!