• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Tips and Tricks HQ

  • Home
  • Projects
    • All Projects
    • Simple WP Shopping Cart
    • WP Express Checkout Plugin
    • Accept Stripe Payments
    • WP Download Monitor
    • Easy HTTPS Redirection
    • WP Security and Firewall Plugin
    • WP eStore Plugin
    • WP Affiliate Platform
    • WP eMember
  • Products
    • All Products
    • Checkout
  • Support
    • Support Portal
    • Customer Only Forum
    • WP eStore Documentation
    • WP Affiliate Software Documentation
    • WP eMember Documentation
  • Contact

How to Add Widgets to WordPress Theme’s Footer

Home Β» Blog Β» How to Add Widgets to WordPress Theme’s Footer

Last updated: April 26, 2013





I wanted to use widgets in the footer of my WordPress theme but my wordpress theme didn’t come with a footer-sidebar by default. I didn’t really wanted to change the theme just because of that. So I hacked the wordpress theme to introduce footer-sidebars. If you are looking for a tutorial that explains how you can add sidebars/widgets to the footer of your WordPress theme then keep reading.

wordpress_theme_icon_128

There are really three main parts to introducing a footer sidebar/widget area in your theme:

  1. Registering the Sidebar(s) in the WordPress Theme
  2. Inserting the Sidebars In the WordPress Theme
  3. Putting some style into the sidebars
WordPress has introduced a few new functions recently which makes it hard to write one tutorial that will cater for every theme out there. I have broken this tutorial into smaller sections to cater for the various different themes.

Keep a backup copy of your “functions.php” and “footer.php” file just in case you make a mistake when making the code changes.



Adding Footer Widget to a Modern Theme

Do the following if your theme is relatively new.

1. Register the footer widget area

Open the functions.php file from the WordPress Theme Editor and search for the following line of code:

register_sidebar

That should take you to the area where all the sidebars are registered in your theme.

Add the following block of code just below the other sidebar registration code (we are telling it to register 3 footer widget areas):

register_sidebar( array(
'name' => 'Footer Sidebar 1',
'id' => 'footer-sidebar-1',
'description' => 'Appears in the footer area',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => 'Footer Sidebar 2',
'id' => 'footer-sidebar-2',
'description' => 'Appears in the footer area',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => 'Footer Sidebar 3',
'id' => 'footer-sidebar-3',
'description' => 'Appears in the footer area',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

The following screenshot is taken from the Twenty Twelve theme’s functions.php file which should give you some perspective as to where you need to insert the above code block.

footer widget area registration example

2. Show the footer widget area in your theme

Open your footer.php file and insert the following block of code where you want to show the footer widgets (this will show the 3 footer widget areas if they have any widgets in them):

<div id="footer-sidebar" class="secondary">
<div id="footer-sidebar1">
<?php
if(is_active_sidebar('footer-sidebar-1')){
dynamic_sidebar('footer-sidebar-1');
}
?>
</div>
<div id="footer-sidebar2">
<?php
if(is_active_sidebar('footer-sidebar-2')){
dynamic_sidebar('footer-sidebar-2');
}
?>
</div>
<div id="footer-sidebar3">
<?php
if(is_active_sidebar('footer-sidebar-3')){
dynamic_sidebar('footer-sidebar-3');
}
?>
</div>
</div>

3. Style the footer widget area to your liking

Add the following block of CSS code to your theme’s style.css file to add some basic styling to the footer widgets you just added. Customize it a little to match your needs. Our how to use firebug tutorial should come in handy for this.


#footer-sidebar {
display:block;
height: 250px;
}

#footer-sidebar1 {
float: left;
width: 340px;
margin-left:5px;
margin-right:5px;
}

#footer-sidebar2 {
float: left;
width: 340px;
margin-right:5px;
}

#footer-sidebar3 {
float: left;
width: 340px;
}

Adding Footer Widget to an Older Theme

Do the following if the theme you are using is a bit old:

1. Register the Sidebars in the WordPress Theme

Go to the WordPress theme editor and open the Theme Functions (functions.php) file. Now Search for the following line in your Theme Functions (functions.php)

if ( function_exists('register_sidebar') )

Once you find the above line then take a look at the the next line which should look similar to one of the followings depending on how many sidebars you have:

register_sidebar(array(
or
register_sidebars(2,array(

Say for example you have one sidebar in your theme and you want to add three rows of sidebars in the footer area so you can put widgets then overwrite the code with the following:

register_sidebars(4,array(

The above will register 4 sidebars (one that you already have and three more that you are about to introduce in the footer area of your wordpress theme).

2. Insert the Sidebars In the WordPress Theme

Now lets insert the siderbars where we want them in the WordPress theme. In our case we are going to insert in in the footer area of the theme so open the Footer (footer.php) file and insert the following code just above the ‘footer’ division:

<div id="footer-sidebar" class="secondary">
<div id="footer-sidebar1">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
<?php endif; ?>
</div>

<div id="footer-sidebar2">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(3) ) : ?>
<?php endif; ?>
</div>

<div id="footer-sidebar3">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(4) ) : ?>
<?php endif; ?>
</div>

</div>
<div style="clear-both"></div>

3. Put some style into the sidebars

Finally, lets put a little style to all the ‘footer-sidebar’ divisions that we just introduced. Open the Stylesheet (style.css) file and insert the following CSS (you will probably have to adjust the CSS to your need depending on what wordpress theme you are using).

#footer-sidebar {
display:block;
height: 250px;
}

#footer-sidebar1 {
float: left;
width: 340px;
margin-left:5px;
margin-right:5px;
}

#footer-sidebar2 {
float: left;
width: 340px;
margin-right:5px;
}

#footer-sidebar3 {
float: left;
width: 340px;
}

Hope this helps! Now you don’t have to change your beloved WordPress theme just to get footer sidebar/widget πŸ™‚

Related Posts

  • How to Install WordPress on Your Domain
  • What Would You Do If Somehow You Lost all Your Blog’s Content?
  • Top 15 Search Engine Optimization (SEO) Techniques I Forget to Do
  • How to Separate Pingbacks and Trackbacks from Comments

Wordpress Blog Setup,  footer widget,  Web Development,  web masters,  Wordpress,  WordPress Theme,  WordPress Tweaks

Reader Interactions

Comments (148 responses)

  1. Robin says:
    November 4, 2011 at 2:27 pm

    Pretty useful to setup a widget at the footer. Great write up as well. πŸ™‚

    Robin.

  2. welders says:
    November 2, 2011 at 12:25 am

    Thank you. I have stuffed around with the footer for hours, now all sorted thanks to your info.

  3. Templates says:
    October 23, 2011 at 2:20 am

    Awesome, thank you !! i only just started learning wordpress, mostly ive been working with forum software and release free forum skins etc but now i can release free wordpress themes as well.

    Cheers

  4. Philippines Virtual Assistant says:
    October 5, 2011 at 5:15 am

    I’ve been looking for almost 30 minutes regarding how to add footer-sidebar and your post has the easiest and simplest way to do it.

    Thank you so much your such a life saver πŸ˜€

    -Damien Lewis.

  5. Lusi says:
    October 4, 2011 at 12:06 am

    Thank you a lot. The tutorial provided is clear enough.
    I try it now.

  6. jewel says:
    October 1, 2011 at 3:50 pm

    I’ve some problem with the footer widget. But finally I’ve solve my problem. Thank you very much.

  7. Chelle says:
    September 27, 2011 at 3:38 am

    Worked beautifully πŸ™‚ Thank you for the easy step by step copy and paste instructions πŸ™‚

  8. Kulwant Nagi says:
    September 22, 2011 at 4:11 am

    This tutorial Really helps me a lot.. thanx a lot because i found this tutorial after too much search…

  9. Vijay says:
    September 12, 2011 at 11:02 pm

    Pretty Simple Huuh. I thought it would be difficult, Thanks for sharing.

  10. aya says:
    September 3, 2011 at 10:31 pm

    Scratch that! I added just above the footer sidebar div, and it cleared up that mess! Thank you so much once again… this tutorial made my theme one that will grow with me and cover my needs for a good deal of time πŸ˜€

  11. aya says:
    September 3, 2011 at 10:26 pm

    Thank you so much for all your help! I have it working and it has a background, I think it looks MARVELOUS and I am so happy!

    May I ask for one last bit of advice? The footer looks great on all my pages, but it goes a little wonky on my front page : http://www.strawberrykoi.com

    The footer background disappears, the whole thing seems shortened and the top of the footer BG is popping up at the top of my slider. Is this a footer.php issue or…? Any thoughts would be greatly appreciated!!!

  12. Paul says:
    September 1, 2011 at 10:25 pm

    I like the way your tips and tricks tutorials cover every aspect of web blogging. You can find everything a newbie needs and all the details a power-user requires. This article is a perfect example. One of those simple things that I as an experienced programmer spend far too much time explaining to novice users. Now I can simply point them to this page and be done with it.

  13. admin says:
    August 30, 2011 at 11:26 pm

    @aya, add your image as the background for the “footer-sidebar” div.

  14. aya says:
    August 30, 2011 at 4:45 pm

    Thank you so much for this guide!!! You LITERALLY saved me $500 with only 10 minutes of work. I have one question How do I assign the whole footer a background image/color?

    Thanks again!!!

  15. SwaEgo says:
    August 30, 2011 at 12:13 am

    Thank you very much. Just what I needed

  16. Mark says:
    August 17, 2011 at 4:19 am

    Thank you so much for this tutorial! Im creating my own themes and this just made things a lot easier!

  17. wide angle macro lens photography says:
    August 14, 2011 at 2:03 pm

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

  18. jangkrik blog says:
    August 14, 2011 at 1:40 pm

    footer sidebar is very useful, thanks for tutorial.

  19. Jill says:
    July 26, 2011 at 11:51 pm

    This might have been the easiest thing I’ve ever done! Thanks!

  20. moderngadget says:
    July 4, 2011 at 3:16 am

    thanks for tutorial. helping me to make footer widget

  21. Anuj says:
    July 1, 2011 at 12:26 pm

    wow it is easy

  22. design says:
    June 15, 2011 at 10:23 am

    great, thank you!

  23. Mikey says:
    May 22, 2011 at 9:29 am

    i was thinking to change theme to get widgets in footer, but now will use this post to make in my current theme
    Thanks alot

  24. simon says:
    May 14, 2011 at 10:54 pm

    hey thanks for this post…I was looking for it

  25. Timothy says:
    May 14, 2011 at 9:44 am

    Seems simple enough – though I would have never figured this out on my own, nice little theme hack I am sure a lot of people will find it useful πŸ™‚

  26. Conservation Jobs says:
    April 4, 2011 at 8:39 am

    Really useful code, I hope I can get it to work on my blog! Thanks, Jon.

  27. Mark Waugh says:
    March 16, 2011 at 6:38 am

    Excellent WordPress sidebar registration post. The concept look more helpful for use widgets in the footer of my WordPress theme. Thanks!

  28. Tiago Araujo says:
    March 14, 2011 at 1:27 am

    I am using a theme that has a slight different structure, but I could make it work anyways. Thanks for the post!

  29. boim says:
    March 4, 2011 at 9:29 am

    nice tutorial…i’ll try it !!

  30. Barbara says:
    February 13, 2011 at 3:09 am

    will the incorporate this into my footers on a few of my sites

  31. Kevin says:
    February 3, 2011 at 6:53 pm

    I just started using wordpress this week with a free business theme and wanted to add more home page text widgets instead of the side bar widgets. It took some figuring but with the help of your instructions I got it and it looks exactly how I wanted!

    Thanks for the great help!

  32. Richard says:
    February 2, 2011 at 8:52 am

    I was looking at how to make a few changes to my WordPress theme and struggling quite a bit with this footer issue. This article led me in the right direction. Many thanks, Richard

  33. teddy says:
    February 1, 2011 at 4:38 pm

    Thank you for the tutorial. I’ve just finished testing it on another website, I think I’ll implement it in my footer as well. Thanks again.

  34. Bella says:
    January 6, 2011 at 12:14 pm

    This is brilliant. I have limited coding skills but using your straightforward instruction managed to tweak my functions.php to add two footer sidebars to the scribblings theme. Brilliant.
    My site is still under construction but feel free to take a look. Once it’s all finished I may post about your tips.

  35. Nick says:
    January 3, 2011 at 5:58 pm

    you made my day

  36. John Gamings says:
    January 3, 2011 at 11:03 am

    For some reason I am not able to get the new sidebars to show up in the admin portion to drag the widgets into it. Other than that though, it seems to be working perfectly

  37. LacyG says:
    December 9, 2010 at 8:41 am

    Just what I needed, thank you.

  38. DUB says:
    December 4, 2010 at 6:02 am

    Hey Guy, Thank you so very much for taking the time to share…very useful, indeed! :). Keep up the good work and Thanks again. Mike

  39. Ellisgeek says:
    December 2, 2010 at 1:32 pm

    Thanks for this helped a lot

  40. marianney says:
    November 29, 2010 at 3:13 pm

    Ok, please ignore my last 2 comments. I finally figured it out. The way they built my theme, the footer code was actually a separate file not part of the theme editor. I had to download it via FTP and then re-upload it. Works beautifully and I am so happy!! Thank you so much for a very easy to understand tutorial. I looked at about 5-6 of them and yours was written in a way that was very easy to follow.
    Thanks!!

  41. marianney says:
    November 29, 2010 at 1:14 am

    ok never mind. i figured that part out, now i can’t seem to figure out how the people who created my theme built out the footer. anywhere i put the code in it, i either get an error or it’s pushed below my footer. i can’t seem to get it inside. am i able post my footer code here in the comments?

  42. marianney says:
    November 28, 2010 at 11:01 pm

    What if my functions.php does not have either line you specify
    if ( function_exists(‘register_sidebar’) )
    etc.?

  43. magnexor says:
    November 27, 2010 at 7:29 pm

    Thank you so much! I was looking all over the web to find out how to make a horizontal “sidebar” and this is the only place I found witha good tutorial

  44. PTEC says:
    November 23, 2010 at 8:01 am

    Thank you for your useful post

  45. andre says:
    November 23, 2010 at 3:55 am

    hi thank you now i can show more widget on my footer themes, thank you thank you thank you πŸ˜€

  46. sarin says:
    November 9, 2010 at 10:32 pm

    thankyou very much……footer sidebar is very useful.

  47. chris says:
    November 4, 2010 at 1:50 pm

    Thanks for the tip, added the code to my site and works perfectly. I only needed the two columns if you want you can check it out working on my site at
    http;//chrisescars.com

  48. tomek says:
    September 29, 2010 at 9:03 am

    thx a lot it does the job!

  49. Chase says:
    September 19, 2010 at 10:08 pm

    Awesome, I had no idea this could be done so easily. Thank you so much.

  50. Nikki says:
    September 19, 2010 at 5:26 am

    Excellent, worked a treat. Thanks for posting, saved me a lot of hassle trying to put a php ad rotator in as I couldn’t work out how to add a widget in the main column.. Now I can just use my Ad rotator plugin in both locations.

« Older Comments
Newer Comments »

Leave a Reply

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

Primary Sidebar

Featured & Popular Articles

Video Answers to Top WordPress QuestionsWordPress Optimization Tips and Tricks for Better Performance and SpeedEssential WordPress Security Tips - Is Your Blog Protected?WordPress Simple PayPal Shopping Cart PluginTop 15 Search Engine Optimization (SEO) Techniques I Forget to DoList of the Best and Must Use WordPress PluginsHow do I Start a Blog and Make Money Online?Good Domain Name Picking Tips for Your Blog SetupFind Out Which WordPress Web Hosting Company Offers the Cheapest and Reliable Web Hosting Solution

Featured WordPress Plugins

WP Express Checkout Plugin
wordpress estore plugin
wordpress membership plugin
wordpress affiliate plugin

Recent Posts

  • How to Use Browser Developer Tools to Inspect Elements and [...]
  • Accept Donations via PayPal from Your WordPress Site Easil [...]
  • Buy Now Button Graphics for eCommerce Websites [...]
  • Subscription Button Graphics for eCommerce Websites [...]
  • Adding PayPal Payment Buttons to Your WordPress Sidebar Ea [...]

Comment & Socialize

  • @Rob, We have just released ...
    - admin
  • I installed the plugin a co ...
    - Rob
  • @Sebastian, We've released ...
    - admin
  • I've used this plugin on a ...
    - Sebastian DjupsjΓΆbacka
  • @John, this plugin doesn't ...
    - admin

Check out our solutions

View our WordPress plugin collection and start using them on your site.

Our WordPress Solutions

Footer

Company

  • About
  • Privacy Policy
  • Terms and Conditions
  • Affiliate Login

Top WordPress Plugins

  • Simple Shopping Cart
  • PayPal Donations
  • WP Express Checkout
  • WP eStore
  • WP eMember

Blogging Tips

  • How to Start a Blog
  • Selecting a Good Domain
  • Cheap WP Hosting
  • WP Video Tutorials
  • Simple SEO Tips

Search


Keep In Touch

Copyright © 2025 | Tips and Tricks HQ