Add Widget-ready Sidebars to WordPress Footers

Now I have removed my Christmas theme formatting, I am ready to work more on my blog design.. Having made the move to WordPress from Blogger not long before I added the festive colors and images, I had not spent any time on the real theme. I know I am doing this backwards – most sane people would decide on a theme before showing their blog face in public. The reason, I want to talk through the process I am going through as I do my design as a way of teaching anyone who may be interested.

To alleviate the problem of those resource hungry social networking widgets making page load time slow, I have now relegated them to the footer. Not being a php expert – (not much past the “hello dolly” stage) I had to search for a way of doing this. I had to piece together various bits of information here and there so I thought it an idea to put it all together for your edification and delight. (I am wondering how many left after reading the last part, thinking how boring). Anyone using anything other than WordPress may as well take their leave at this point too, although I would much rather you click on recent posts or archives and stay a while longer on this blog of course.

Rather than having to add widget codes directly into my footer.php, I have added “sidebar” elements into the footer. This means I can add widgets to them from the WordPress dashboard widget page, which gives me more flexibility if I change their content..

How to add a sidebar to a WordPress footer

Firstly I had to tell WordPress to insert new sidebars into my theme by altering the footer.php file.

As I already have two sidebars and wanted 3 columns in the footer, I needed to let the WordPress architects know that instead of two sidebars I now needed 5. (the architects are those that work on the basic structure and design – in my imagination that is). For this I had to alter the functions.php file in my theme folder.

Edit functions.php:

Find the section in your theme folder’s functions php file that says something similar to the following- except the number will not be 5 yet:, it may be 1 or 2. Change the number to reflect how many sidebar elements you want in total (that is the number of sidebar(s) in your sidebar area plus how many you want in your footer) . If you do not have a functions.php file but have a widget enabled theme create the functions.php file including all of the code below.

<?php
if ( function_exists('register_sidebar') )
    register_sidebars(5,array(
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<h4>',
        'after_title' => '</h4>',
    ));
?>

Now the architects have drawn up their plans, the construction team come in to put the new sidebars in place. They need to build the new “sidebar” elements into the footer. I added mine at the very top of the footer straight after:

<div id="footer">

Add to footer.php:

<div id="footer-sidebar" class="secondary">
   <div id="footer-sidebar1">
     <?php if ( !function_exists('dynamic_sidebar')
      || !dynamic_sidebar(3) ) : ?>
     <?php endif; ?>
   </div>
   <div id="footer-sidebar2">
     <?php if ( !function_exists('dynamic_sidebar')
      || !dynamic_sidebar(4) ) : ?>
     <?php endif; ?>
   </div>
   <div id="footer-sidebar3">
     <?php if ( !function_exists('dynamic_sidebar')
      || !dynamic_sidebar(5) ) : ?>
     <?php endif; ?>
   </div>
</div> <!-- Close footer-sidebar -->
<div style="clear-both"></div>

I gave my new elements the id of “footer-sidebar” but you could call them anything you like as long as the name is unique – that is, different to any other id name you have in your theme.

That done, when your site loads, the builders come in and add the sidebars into the footer. Imagine how busy they are grabbing all the bits needed to put your page together.

The problem is the building is is still very basic. Now we need some interior designers to add a bit of style and finesse. Crack open your style.css file and pretty up the sidebars so they sit side by side of a width that is going to suit the sort of content you want in them. I made mine all the same width, measured so they stretch the full width of the footer: I gave the whole footer a border. I could have added borders around each sidebar, added background color etc, but wanted to keep it simple for these instructions.

Add to style.css

#footer-sidebar {
  border: 1px solid #cccccc;
  display:block;
  height: 260px;
}
#footer-sidebar1 {
  float: left;
  width: 300px;
  margin-right:20px;
  }
#footer-sidebar2 {
  float: left;
  width: 300px;
  margin-right:20px;
 }
#footer-sidebar3 {
  float: left;
  width: 300px;
 }

Note that the divisions have the same names as I gave them when adding them to footer.php

As, by the time you read this, I may have altered the formatting of the footer once more to add extra styling elements here is an image of what it looks like after adding the above styling.

Blogging Sueblimely

The following two tabs change content below.
I am Sue Bride, a Professional Blogger, Web Developer and Internet Marketer from the Mornington Peninsula, Australia. Here I talk about tools and resources for Blogging, Social Media, Networking, Wordpress, SEO, Images and Marketing. I create Wordpress sites for charity and small business.
Categories Design and Coding, Wordpress

61 Comments

  1. Posted January 11, 2008 at | Permalink

    Hi Sue,
    I am so glad that you dropped by. I have been working hard to rejoin all of my sites. And readd all of my friends and contacts.

    I don’t find this boring at all and I am Blogger. I started once to make the move to wordpress but had problems working in it.

    So I just know this site will help many!!
    Happy New year Sue,
    Jackie

    Shinade’s last blog post..My Beautiful Loves

    • Sueblimely
      Posted January 13, 2008 at | Permalink

      Hi Shinade, glad to see you up and running again and thanks for your kind comments.

  2. Julien
    Posted February 5, 2008 at | Permalink

    Impressive post. I havent found anything this good anywhere. Heads up!

    For those interested and sceptical, if you put a little concentration into this it actually works.

    Congrats!

    • Sueblimely
      Posted February 5, 2008 at | Permalink

      Thanks Julien, it does take a bit of thinking about the first time you do it but you can add ‘sidebars’ all over the place. :lol:

    • Posted November 28, 2008 at | Permalink

      After 100′s of tries, this one actually worked through the wedgit drop down box to add stuff. I must say they were all along the left hand side but i have a feeling that is just a width correction. Still a great job. I have not put this online until I figure out the vertical listing. ANY help will make me smile

      JIM

      Jims last blog post..Hooray!—–Finally a New Site!

  3. Posted February 22, 2008 at | Permalink

    Thanks for adding this, I have been trying to find a way to change my footer and this really helped. The only problem is that my hosting provider takes a long time before they update the main page and everything in my blog to follow what I want it to do. It has been known to take three days before it shows up right.

    • Sueblimely
      Posted March 22, 2008 at | Permalink

      That is dreadful – 3 days! Just a thought though, have you considered it may be your browser cache that needs clearing out because it is storing your old information?

  4. Posted March 5, 2008 at | Permalink

    Hi Sue, thanks so much for your tutorial, this was just what I was looking for!

    JoLynn Braley’s last blog post..Tastes Great, More Filling – Mrs. May’s Naturals Snacks

    • Sueblimely
      Posted March 22, 2008 at | Permalink

      I am glad – if there are other things you would like to learn please let me know as I am sure there are others who would be interested too :-)

  5. Random Guy
    Posted March 22, 2008 at | Permalink

    I’m having a problem with this my sidebars aren’t showing horizontally. Does anyone knoe what I’m doing wrong?

  6. Sueblimely
    Posted March 22, 2008 at | Permalink

    As you have not left a link I can’t go and take a look but there could be a couple of reasons.

    1. Your horizontal sidebar may not be styled to take up the full width of your blog but is taking on the width of your ordinary sidebar.

    2. The information in the horizontal sidebar may not be styled to display horizontally. e.g. if it is a link list that will automatically take on the styling of your sidebar lists unless you style it to display horizontally – the CSS code for a horizontally displayed list should include display:inline;

    Hope this helps.

  7. Posted March 30, 2008 at | Permalink

    Thank you for posting this. It’s the first time I’ve ever attempted to alter the code in WP this much and it worked!

    Lisa’s last blog post..The Great Birthday Scam

  8. Poppy
    Posted April 12, 2008 at | Permalink

    Excellent, really clear, tutorial. Much appreciated!

  9. joao
    Posted May 9, 2008 at | Permalink

    Hi,

    Thank you very much, u re a life saver!
    This post save me a lot of time
    I will just try right now

    Best regards,
    Joao from Brazil

  10. stuck!
    Posted May 15, 2008 at | Permalink

    I followed the instructions, but it didn’t add any sidebars. When I go to the widgets page, it still has only 1 sidebar. Am I missing something?

  11. Posted June 13, 2008 at | Permalink

    Thanks a lot for this great post. I just made a theme for my new blog and your knowledges helped me much!

    jbjs last blog post..Python: 50 modules for all needs

  12. Posted July 19, 2008 at | Permalink

    I used this guide to help ad widgets to the footer of my blog.
    Thanks a bunch.

    Sands last blog post..Dangers of Driving in Uruguay

  13. Posted August 27, 2008 at | Permalink

    This article sure is handy! shame you cant copy the code out all in one go though. Really good guide. easy to follow. My blog will soon be featuring a footer sidebar

  14. Posted October 20, 2008 at | Permalink

    thank you so much , your tutorial about footer widgetizing is the best out there.

    zeds last blog post..Explosion d’une vraie bombe nucléaire

  15. Posted November 4, 2008 at | Permalink

    Hi, I used this tutorial to make my footer widget ready but how come the bottom 3 widgets are not showing up in the WordPress dashboard widget page?

    I can’t add widgets to the footer… right now the content showing on my footer is the code embedded into my footer.php

  16. Posted November 28, 2008 at | Permalink

    All worked great now, you just have to remember to register the total number of sidebars on the blog and not just the 3 new ones.

    JIM

    Jims last blog post..Hooray!—–Finally a New Site!

  17. Posted January 4, 2009 at | Permalink

    Hi.

    I’m trying to do this on my test area at http://hamishjoy.com/testarea/

    Unfortunately, the footer widgets are not displaying.

    I made the changes, saw the options for sidebar 1-5 in the widgets section, added a few widgets, and still, nothing seems to happen…

    :(

    I’m still working around it… trying to see what the matter is… So far, I can’t figure it out at all…

    And yes, I’m a noob here.
    :D

    hammys last blog post..Trippin’

  18. Posted January 4, 2009 at | Permalink

    hey, I think I solved it.

    Anyway, your guide was extremely simple to follow. Thanks a LOT.

    :) I’ll use it on my main blog once I make a few more changes…

    hammys last blog post..Trippin’

  19. Posted January 9, 2009 at | Permalink

    If I don’t know this, the only way I could get is find another template. Thanks to you, there is another option now.

    Atnizs last blog post..Message To Work At Home Bloggers

  20. Posted March 4, 2009 at | Permalink

    Sue, thanks for your easy tutorial, we.. web designers always looking for these kind of guide.

  21. Donna
    Posted March 18, 2009 at | Permalink

    I can’t seem to get the sidebars to register and show up under 2.7.1

    Here is the register statement from the theme I am using

    if ( function_exists('register_sidebar') ) {
    register_sidebar(4,array(
    '1' => 'Wide',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '',
    'after_title' => '',
    ));

    }

    Does anyone know where else widgets may be registered?

  22. Posted April 9, 2009 at | Permalink

    Hey thanks for nice tutorial…I’m looking for this to add into my new blog

  23. Posted May 20, 2009 at | Permalink

    Your instructions were the easiest to read, follow, and implement of most I’ve seen. Thanks!

    Dereks last blog post..Run For The Wall Update: May 18, 2009 (Day 6)

  24. Posted June 1, 2009 at | Permalink

    Thanks! Very helpful, short&clear, easy to implement and customize. Good job! :D

  25. Posted June 28, 2009 at | Permalink

    “Not being a php expert – (not much past the “hello dolly” stage)…”

    Try using Lynda.com I’ve learned a ton through her site by simply paying $25.00 per month for unlimited tutorials. – Colleen :)

    Kennewick Real Estates last blog post..Kennewick WA Homes for Sale

  26. Posted July 10, 2009 at | Permalink

    Great tutorial.

    Thanks 4 sharing.

    neos last blog post..Linkin Park – Lockjaw

  27. Posted July 23, 2009 at | Permalink

    Does this work with 2.8.2 ??
    .-= kuld33p´s last blog ..14 Must To Do after WordPress Installation =-.

  28. Posted July 28, 2009 at | Permalink

    I have tried the online code generators,they ask for a url which i obtained by uploading my image to imageshack and then pasting the given url over.
    i then pasted the code i received from the generator in my myspace and everytime

  29. Posted July 30, 2009 at | Permalink

    Hi Sue,

    When I put the code in Functions.php, I get unexpected error. Please help!
    .-= Rajee´s last blog ..Blank 2 =-.

  30. Posted August 18, 2009 at | Permalink

    Nice publishing..It will really makes the new changes time to time..That is really appreciable..Keep it up..

  31. Posted September 14, 2009 at | Permalink

    From the day one when I started searching for WordPress theme, I searched for something with a footer. That is my first and minimum requirement.
    I landed with thesis theme,but it was lacking Footer and glad I added footer on it with coding. I believe WordPress footer has lots of advantages on terms of SEo and lowering down Bounce rate.
    .-= Harsh Agrawal´s last blog ..Difference Between Free WordPress and Self Hosted WordPress Blog =-.

  32. Posted September 27, 2009 at | Permalink

    Well, remember that you can also add widget-ready sidebars to WordPress footers or anywhere in your design, to give extra content management options to

  33. Posted October 8, 2009 at | Permalink

    For the style, wouldn’t it be add to style.css, not style.php? :)
    .-= Ursula´s last blog ..Darren Rowse’s New Problogger Community Forum =-.

  34. Posted October 11, 2009 at | Permalink

    It’s my first time to change footer myself.

    Now I can add sidebar there and add the code to style.css.

    Thanks.
    .-= thepadi´s last blog ..Facebook Lite untuk Akses Lebih Ringan =-.

  35. Posted October 19, 2009 at | Permalink

    Thank you for noticing that Ursula – I have amended the mistake.

  36. Posted October 24, 2009 at | Permalink

    I made the changes, saw the options for sidebar 1-5 in the widgets section, added a few widgets, and still, nothing seems to happen…

  37. Posted December 14, 2009 at | Permalink

    nice tutorial, thanks for share…I need it

  38. Posted December 15, 2009 at | Permalink

    thanks for your tips and suggestion after a long time i read this type of article. thanks again.
    .-= aks´s last blog ..Real Estate Loan , Real Estate Loans =-.

  39. Posted December 16, 2009 at | Permalink

    Nice tutorial – thanks for sharing it :)

  40. Posted December 17, 2009 at | Permalink

    this is exactly what i’m looking for, thank you

  41. Katrina
    Posted December 18, 2009 at | Permalink

    I am using the Sliding Door theme in WordPress and I cannot get the Footer to work. In fact, adding the first steps causes both my site and my wordpress admin to disappear and I have go in through my FTP to delete the coding.

    Currently, my function.php reads:

    ‘sidebar1′,
    ));
    register_sidebar(array(‘name’=>’sidebar2′,
    ));
    register_sidebar(array(‘name’=>’footer’,
    ));

    instead of the way you have it and the rest of the coding is exactly the same as above. Yet, my footers do not work.

    Please help!!

  42. Posted January 22, 2010 at | Permalink

    Thank you! After trying several other tutes, yours worked.
    .-= Debbie´s last blog ..Getting lots of things done =-.

  43. Posted February 7, 2010 at | Permalink

    Well, remember that you can also add widget-ready sidebars to WordPress footers or anywhere in your design, to give extra content management options to

  44. Posted February 10, 2010 at | Permalink

    I usually have a lot of trouble with widgets because they wont save in the WordPress menu, any suggestions?
    .-= Megan Fox´s last blog ..Megan Fox Gallery =-.

  45. Posted February 13, 2010 at | Permalink

    Hi, I found this very handy and it seems easy. However things doesnt seem to work that easy,

    I found how to add widget boxes in the widget area, I pasted “footer sidebar” in the footer and i did the same in the style.css. However, it all appears to be broken on the site. the widget area do not appear inside the borders of the theme but out of it.. Ok , I’m a beginner, but shouldn’t be that, cause I’m almost certain i followed your instructions right , I think there may be something with my theme :( , i don’t know … i’d appreciate if you have a minute and have any ideas of whats wrong
    .-= Spyro´s last blog ..Black Button – A ‘what would you do’ film =-.

    • Posted March 10, 2010 at | Permalink

      Widgets often break outside of the boxes they are meant to be contained in. Giving the surrounding area height and or width properties should do the trick.

  46. Posted February 15, 2010 at | Permalink

    Hi, just to let you know, i managed to make it :) yei, thanks for the info
    .-= Spyro´s last blog ..Black Button – A ‘what would you do’ film =-.

  47. Posted April 21, 2010 at | Permalink

    Thanks alot for this information.. I will be using it often while making wordpress themes for my website graphics club.

    You did an awesome job of explaining each step clearly. Requiring me to type each line instead of just copy and paste led me to understand it more.

    I’m now thinking of many other different areas that I could add widget areas to. :)
    .-= Website Graphics Club´s last blog ..Website Graphics Club =-.

  48. Posted May 1, 2010 at | Permalink

    It’s good to see that a post like this still has such value after such a long time.
    Though saying that there is a Widgets on Pages plugin that is available for wordpress that allows you to add a widget container to any post/page content through the use of a shortcode. I know this is a different approach to adding PHP to the footer but would allow people to have this functionality without the need to get their hands so dirty.

    You can check it out at http://wordpress.org/extend/plugins/widgets-on-pages
    .-= Todd Halfpenny´s last blog ..Too Helpful =-.

  49. Posted July 2, 2010 at | Permalink

    Aww this is a really cute tutorial, I like it! Tell me how would the little builders come in and create a bar right below the header?. Just below my page navigation menu. I will show you an example I have a full width footer bar implemented now but was wanting to build a full width top bar so my store gets nudged up to the top. I show you…http://nichewebsitestrategy.com/estore/ Thanks if you have time.
    .-= Scot Manaher´s last blog ..Improving Your Video =-.

  50. Posted August 13, 2010 at | Permalink

    I was trying to add widget areas on footer.. but somehow it is giving error.. Let me try out using your tutorial..
    christian songs online recently posted…Open Our Eyes- LordMy Profile

  51. Posted October 12, 2012 at | Permalink

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

6 Trackbacks

  • By Bay Bedava - Netten Ba?l?klar on September 8, 2009 at

    örnekler: blogunuzun “footer” bölümünü etkin kullan?n 20 örnek wordpress footer tasar?m? wordpress footer bölümünü gözard? etmeyinfooter bölümüne site bile?enleri eklemekfooter bölümünü ki?iselle?tirmek örnekler: 404 bulunamad? sayfas? Smashing Magazine’in bu sayfaya dair ipuçlar? ve örnekleri 404 sayfan?z? ki?iselle?tirin

  • By PlugIM on January 11, 2008 at

    [...] http://www.sueblimely.com Sueblimely submitted 8 minutes ago Now I have removed my Christmas theme formatting, I am ready to work more on my blog design.. Having made the move to WordPress from Blogger not long before I added the festive colors and images, I had not spent any time on the real theme. I know I am doing this backwards – most [...]SHARETHIS.addEntry({ title: “Add Widget-ready Sidebars to WordPress Footers”, discuss trackback category: development problem? duplicate story bad link spam old news okay this is lame tags: blogging social networking add to: favorites   1 plug plug ‘EveryDay Qi’ Teleseminar at 8 pm EST [...]

  • [...] Your page is on StumbleUpon [...]

  • [...] blogs4God Member Posted 44 minutes ago # Hmmm … alot of interst on this topic. Okay, I’ll bite, here’s an article on the topic you may find useful entitled Add Widget-ready Sidebars to WordPress Footers. [...]

  • [...] would someone have so many sidebars to begin with? Well, remember that you can also add widget-ready sidebars to WordPress footers or anywhere in your design, to give extra content management options [...]

  • [...] display them is to have three columns floated next to each other with widgetized data in them (a la Blogging Sueblimely and Lorelle). This looks very clean and provides a quick way to showcase a lot of information in [...]

  • My Passport