Continue..

This site uses cookies. By using this site without changing your browser cookie settings, you are accepting this. More information: privacy policy.

Add Widgets To Your WordPress Footer – Easy How To Guide

I’ve been noticing that WordPress blogs with widgetized footers, help ME when I visit to find other interesting posts on the blog.

Without widgets in the footer, you know the problem … You read a good post, get to the bottom of the page, then wonder where to go next.

BUT, if the page footer contains widgets, chances are you will immediately see other post titles or enticing comments, which help you to find other posts you may enjoy.

So having realized this from my own blog reading behavior, I thought I really should put widgets in my own footer, here at KevinSBrown.com

I’ve just done it and you can see the new widgets in the footer here (if you page down). I have added three side by side widget areas to the footer.

So having worked it out, I think I should share my “easy how-to guide” to widgetizing your WordPress footer.

Here goes…

STEP 1: Tell WordPress you want to use three more widget positions, and they should be called “footer 1″, “footer 2″ and “footer 3″)

Use the theme editor for your current theme, to add an extra line of code to the functions.php file. It’s the 3rd line below, beginning register_sidebars(3, array…


if ( function_exists('register_sidebar') )
{ register_sidebar();
register_sidebars(3, array('name'=>'Footer %d')); }

STEP 2: Add the extra widget positions to your theme’s footer

Again using the theme editor, add this to your footer.php file…


<div id="footerwidgets">
<div id="footer-left">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer 1') ) : ?>
<li>
<?php endif; ?>
</ul>
</div>
<div id="footer-middle">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer 2') ) : ?>
<li>
<?php endif; ?>
</ul>
</div>
<div id="footer-right">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer 3') ) : ?>
<li>
<?php endif; ?>
</ul>
</div>
</div>
<br>
<br clear="all" />

STEP 3: Style the new footer divs

Add these div styles to your style.css file.
(note: you will probably need to adjust the width parameters and other style elements, to suit your particular theme)


/* Footer Widgets */
#footerwidgets { display: block; width:900px; margin: 0 auto; text-align:center; }

#footer-left { width: 210px; float: left; margin: 15px 10px 10px 30px; padding: 10px; background-color: #f3f3e7; }

#footer-middle { width: 210px; float: left; margin: 15px 10px 10px 15px; padding: 10px; background-color: #f3f3e7; }

#footer-right { width: 210px; float: left; margin: 15px 10px 10px 15px; padding: 10px; background-color: #f3f3e7; }

I hope that helps. You will need to adjust to your particular theme and requirements, but that is exactly what I have just done here and you can see the result.

New here? Don't miss the next. Get updates, how-to's and WordPress expertise by email (unsubscribe anytime)


We take your privacy very seriously (click for full policy)

29 responses to “Add Widgets To Your WordPress Footer – Easy How To Guide”

  1. Tahmid Hasan says:

    Nice Nice Nice………….. Its really work… Thanks for giving good code

  2. benizio says:

    Very nice! Thanks for this tut! One question anyway: How can I remove those listing dots (). When I remove “li” with firebug the dot disappears. But how to remove it completely from the code? Every response is appreciated.

  3. Hossain says:

    Really works awesome nice tutorial

  4. P says:

    Thanks for sharing! Helped me customize a WP theme that came without a foooter…

  5. kyle says:

    Awesome. Very simple to add into my website. Great tutorial. I needed the widget area a little wider to fit my layout and making the div area wider was a simple change.

  6. Amir says:

    Thanks a lot for this tutorial. Thanks Thanks Thanks….

  7. Sergio Arrieta says:

    Muchas gracias, me fue de mucha ayuda.

    eres genial!!!

  8. Thanks for the info really worked great searching for this for many days…

  9. [...] en el pie de la página, no son parte del tema, los hemos añadido a posteriori. Para ello seguimos las instrucciones de esta página, modificando los archivos [...]

  10. Nipun says:

    Thanks its working perfectly … :)

  11. Rohith VR says:

    i got the extra sidebars to work.. thanks.. but have trouble expanding my present website layout.. sigh.. great post and great help!

  12. micha says:

    thanks a lot! i´ve been looking for a simple way to achieve this all morning. And your code worked like a charm :)

  13. Laurent says:

    Thanks so much :D D

  14. Waz says:

    Hi Kevin,

    Thanks for this very useful tutorial – it works like a charm!

    However, I’m trying to add a background across the width of the whole footer, and when I use background: url(images/grey-block.png) repeat-x; in #Footerwidgets it doesn’t work.

    Would you have any ideas as to why it’s not working?

    Thanks

    • Kevin says:

      Hi Waz, Thanks for the comment.
      Try background-image: instead and make sure the relative path to the image is finding it (use full http://etc link if necessary).
      Hope that helps!

  15. Danica says:

    I have tried adding 4 widget areas, but for some reason it’s not working. It is working but last widget area keeps floating all the way to the left side of my site, instead to be right after third widget area.
    Can you tell me what I’ve done wrong?

    For step 1 I’ve changed number into 4:
    register_sidebars(4, array(‘name’=>’Footer %d’));

    Step 2 I’ve added middle-left and middle-right:

    And in step 3 I’ve added extra css code for fourth widget area, something like this:

    #footerwidgets {
    display: block;
    width:975px;
    margin: 0 auto;
    text-align:center;
    }
    #footer-left {
    width: 230px;
    float: left;
    margin: 15px 10px 10px 30px;
    padding: 10px;
    text-align: center;
    }
    #footer-middle-left {
    width: 230px;
    float: left;
    margin: 15px 10px 10px 15px;
    padding: 10px;
    text-align: center;
    }
    #footer-middle-right {
    width: 230px;
    float: left;
    margin: 15px 10px 10px 15px;
    padding: 10px;
    text-align: center;
    }
    #footer-right {
    width: 230px;
    float: left;
    margin: 15px 10px 10px 15px;
    padding: 10px;
    text-align: center;
    }

    What am I missing?!

    • Kevin says:

      Hello Danica,
      Say the URL of the website, and I will do my best to work it out.
      If it’s secret, tell me here

      Thanks, Kevin

      • Jenni says:

        Hello-

        Love the code by the way it really taught me a lot about footers and widgets however I too want to add 4 widgets instead of three and basically did the same thing as Danica to no avail. Please help. Thank you

        • Jenni says:

          Nevermind I figured it out I had some in the wrong spot in my footer.php file… this is what it ended up looking like

          I put this above but below my css for my page bottom

    • Patti says:

      Thank you, I love the widget areas, I do however have a small white dot before each one. Is there anything I can do to delete or hide those dots?

  16. Neha says:

    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..! :)

  17. Rey Mendoza says:

    youre a life saver, with a little bit of patience working with codes (Im not a programmer) it worked well for me

    Many thanks!
    Rey

  18. david says:

    Thank you so much, it works well
    you’re brilliant.

  19. david says:

    Thank you for the quick reply,

    After i checked my template, it seems fixed width (930px), and i use most existing browsers, now i should tell you that I’m not really good coder, i have tried setting fixed width to the widgets but i don’t know what changes, widgets margin must have.

    Could you please post, the code snippet you use for the current theme (1000px)!! that will help me out to understand what changes should i add to each different template fixed width.

    I very appreciate your help.

    • admin says:

      I currently have this in the footer.php on this blog..

      And this in style.css

      /* Footer Widgets */
      #footer-left {
      width: 210px;
      float: left;
      margin: 15px 10px 10px 30px;
      padding: 10px;
      text-align: center;
      }
      #footer-middle {
      width: 300px;
      float: left;
      margin: 15px 10px 10px 15px;
      padding: 10px;
      text-align: center;
      }
      #footer-right {
      width: 210px;
      float: left;
      margin: 15px 10px 10px 15px;
      padding: 10px;
      text-align: center;
      }

      Hope it helps, K

  20. david says:

    Thanks for posting this info! It’s really helped me a bunch as I’ve made changes to my template.

    But i have noticed that the third widget goes away from the widgets when i open my site on many different resolutions, or resize the browser page ! is there any way to simply center the three widgets ??

    Regards

    • admin says:

      Hi david,

      Thanks very much for the reply. I am glad this post has been helpful!

      The behaviour will depend somewhat on what theme you are using (fixed width or not), and the browser you use to view the site. For example, the theme I am using here (mine) is fixed 1000px width. You will see the righthand side of the site gets gradually cut-off, as you reduce the width of the browser window.

      The footer widgets positions also have a fixed width each. You could try changing these to percentage width on your site, but you may find some widgets don’t display very well, if the positions are very narrow. I tend to prefer the fixed width, with perhaps not all three widget positions displaying, if the window is narrow. Interestingly, it works just fine on iPod/iPhone and iPad, which is pretty important these days.

  21. ioloman says:

    i just want to say thank you for the tutorial. it easy, and it work. that is all a good tutorial should be. keep up the good work

Leave a reply