• 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. admin says:
    September 5, 2010 at 9:41 pm

    The register_sidebar function should have added more widget option in the widgets menu.

  2. alecs says:
    September 4, 2010 at 4:37 am

    mh.. the only thing is, the widget dashboard shows only one sidebar. if i add a widget its not displayed in the footer.

  3. WordPress Services says:
    August 9, 2010 at 6:25 pm

    Excellent WordPress sidebar registration post. great info and very easy to understand.

    thank you for sharing.

  4. Franco says:
    August 7, 2010 at 9:00 am

    Okay… I want to thanks because it work’s and the step-by-step was so easy to understand… even for a not-well-english speaking person like me… So, thanks again…

  5. Cristian says:
    July 25, 2010 at 10:52 am

    Very useful and to the point! Thanks for sharing!

  6. Manthan says:
    July 16, 2010 at 1:22 am

    Thank you, I was looking for a way to add a widget to the footer so that I could use the WordPress 3.0 menu system.

  7. dhanasekar says:
    July 6, 2010 at 3:14 am

    sorry, in footer php i didnt save code. thats created the problem.. now its visible ..still i’ve problem. i will sort out on my own.. thanks for d tutorial

  8. dhanasekar says:
    July 6, 2010 at 3:09 am

    Thanks for your code,I did as you told and registered sidebars shows in widget page too. but it’s not visible in site. though i already placed my content there.. could you help me..

  9. admin says:
    June 19, 2010 at 3:10 am

    The look and feel of the footer div is controlled by the CSS. Check the 3rd section of this post which has the CSS for these footer divs.

  10. jean pierre says:
    June 18, 2010 at 9:35 am

    were i can find the footer div how it looks?? kind regards

  11. simon says:
    June 17, 2010 at 8:26 am

    Just added to one of my blogs. Great. Seems very popular on alot of sites these days and declutters the sidebar.

    Thanks much appreciated

    Si

  12. beyondokc says:
    June 10, 2010 at 10:53 pm

    Easily appllied to my blog…sweet. I didn’t want to change templates, so I Googled “add widget to WordPress theme”… 3rd result.. sweet man!

  13. John Media @ dedicated hosting says:
    June 9, 2010 at 10:32 am

    It was nice of you to post this tutorial It really did help a lot. I could use this on my WordPress site and you’ve included in some code’s thanks I really appreciate it.

  14. admin says:
    June 1, 2010 at 2:41 am

    Can’t tell for sure what is happening in your case but if the sidebar option is not appearing in your wordpress widgets menu so you can drag and drop then I would say go over step 1 of this tutorial again to see if you have made any mistakes there. Step 1 is where the sidebar gets registered with WordPress so it should appear in the widgets menu.

  15. stacey says:
    May 31, 2010 at 2:35 pm

    Oh and by the way – the sidebars were not added to the home page, so please use this page to see what I’ve done:

    http://safarisurfvacations.com/about-2/

  16. stacey says:
    May 31, 2010 at 2:23 pm

    Hi and thanks so much for the tutorial.

    I am not getting any errors, however, I am not able to get the new Sidebars to show up in the admin portion to drag the widgets into it. It seems as though everything is working as it should except for that!

    Thanks in advance for your help!

  17. Kat says:
    May 25, 2010 at 3:20 pm

    Well, shucks, and thanks. I actually designed that footer, so it’s all my fault. This will be easy to fix though. Thank you so much for the help and the great tutorial.

  18. admin says:
    May 25, 2010 at 4:16 am

    Okay, here is the issue… your theme’s footer is using the following static image rather than drawing lines along the x or y axis:

    http://pareandfocus.com/index.htm/wp-content/themes/photocrati-viewfinder/images/footer-fon2.jpg

    The problem with static images are that they don’t expand when you add more stuff in the div. So your footer div (#footer) is using the static image as a background making it impossible to expand your footer area in nice way (not all theme designers think about these things when they do the design).

    Anyway, your best option would be to modify this static image and expand it vertically (do some line drawing in photoshop) to cover the gap:

    http://pareandfocus.com/index.htm/wp-content/themes/photocrati-viewfinder/images/footer-fon2.jpg

  19. Kat says:
    May 24, 2010 at 10:50 pm

    Thanks so much, it’s at
    pareandfocus.com
    My name should link there too. Thanks again

  20. admin says:
    May 23, 2010 at 10:42 am

    Hi Kat, if you can post a link to the page where you have this issue then I might be able to give you some pointers after I take a look at it (Design/CSS related issues are easy to solve if you see them with your own eyes).

  21. Kat says:
    May 22, 2010 at 3:02 pm

    This is a great tutorial. This was really easy to implement and the new footer widgets are working well.

    (I’m having a small problem with the styling though. The new sidebars are either covering up my background image or making a space between the page background image and the footer background image. I tried adding the page background url to the footer sidebar style, but no luck. Any ideas?)

    Great tutorial again- it’s so nice when all I have to do is follow directions, and cut and paste. There should be more tutorials like this.

  22. william says:
    May 18, 2010 at 6:38 pm

    Thanks that was very good..
    m liking your site very much thanks for all the great
    information.

  23. anwer says:
    May 18, 2010 at 10:51 am

    Registration page will have three main parts

    1. Header
    2. Content
    3. Footer

  24. webeno says:
    May 16, 2010 at 4:06 pm

    Great help, thank you!
    I linked to your post in mine: How to add sidebar (widget) placeholder in WordPress

  25. admin says:
    May 8, 2010 at 3:51 am

    The Widget titles come from your theme. So as long as your theme is properly coded (meaning the wordpress standard CSS has been used) then it should just pick it up.

  26. Daphne says:
    May 7, 2010 at 1:50 pm

    I’ve got this going fairly well, now I could use some help to get the widget titles in the same css style as the block headers. Am I missing something in my coding? Any help would be appreciated!! 🙂 Thanks!

  27. Roeg says:
    May 4, 2010 at 4:02 pm

    Can you show me how to build a footer area exactly like this please? There seems to be 3 footer sections.
    1) Four widgets across and two down
    2) Menu
    3) Copyright Info etc.

    http://www.spike.com – spike(dot)com

    Thank you very much 🙂

  28. admin says:
    April 20, 2010 at 3:59 am

    “Warning: session_start() [function.session-start]: Cannot send session cache limiter – headers already sent” – this error usually means you have a “session_start()” statement after an “echo” or dropping cookies. Remember, the “session_start()” should be the first line of code in a PHP file.

  29. rob says:
    April 19, 2010 at 10:10 am

    reinstalled php files!

  30. rob says:
    April 19, 2010 at 10:01 am

    Ouch – that has totally screwed up my site:

    Warning: session_start() [function.session-start]: Cannot send session cache limiter – headers already sent (output started at /home/swina/public_html/increasepenissize.biz/wp-content/themes/38/functions.php:12) in /home/swina/public_html/increasepenissize.biz/wp-content/plugins/si-contact-form/si-contact-form.php on line 846

    Any ideas?

  31. admin says:
    April 17, 2010 at 11:50 pm

    @Akis, the sidebars will be side by side… you should be able to add widgets to whichever one you want.

  32. admin says:
    April 17, 2010 at 11:49 pm

    @Gabriel, Use the conditional tag is_home() to determine if the current page is home page then display the footer if it is.

  33. Abraham says:
    April 16, 2010 at 3:41 pm

    Thanks for this tutorial. I implemented on my site in a single page. importing only rss feeds from my other sites. It works like a dream.

    Thanks again.

  34. Gabriel says:
    April 15, 2010 at 6:58 pm

    Any body here knows how to add a widget but instead of doing it in the footer I want to add it to my home page.

    Any help is appreciate it.

    Thanks

  35. akis says:
    April 15, 2010 at 2:44 pm

    hi, your code is great. i have a question. is there any way to put the widgets side by side in fooer sidebar and not the one below the other? thanks a lot again!

  36. admin says:
    April 9, 2010 at 3:25 am

    Can you explain a little bit more please?

  37. Brian says:
    April 8, 2010 at 2:14 pm

    The sidebars don’t need names in the function.php?

  38. durian says:
    March 25, 2010 at 9:23 pm

    thank you. it works in my other blog.

  39. Nate says:
    February 22, 2010 at 9:22 am

    thanks for this awesome tutorial, My site needed to have some more content on the homepage and my sidebar was getting too big! Having trouble working out the css but I should be able to work it out… (for some reason its half way over my content and aligned to the left of the browser window no matter what I do!)

  40. John says:
    February 19, 2010 at 3:38 pm

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

  41. admin says:
    January 26, 2010 at 2:57 am

    I have a feeling you were using WordPress theme editor to edit your files. This is a big no no because as soon as you make a mistake it’s gonna lock you out.

    Before you start doing PHP changes it is a good idea to keep a backup copy of the file that you are editing. Then use FTP to upload the file after you have modified it.

    Now to address your issue. you will need to use FTP to upload a backup copy of the file where you introduced the error or download it from the server and fix the error and reupload it then you should have access to wordpress again. Let me know how you go.

  42. melandriaromero says:
    January 25, 2010 at 7:18 am

    i am trying to make your tutorial but somewhere along the way, maybe i have done some error and now i cannot access my blog anymore. hope you can help me, because i am really in panic.

    this is what appeared

    Parse error: syntax error, unexpected ‘<' in /home/melandria/prosperitymelandria.com/wp-content/themes/ProsperityTheme/functions.php on line 26

    thank you.

  43. pak says:
    January 20, 2010 at 10:02 pm

    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

  44. Ivy says:
    January 10, 2010 at 6:25 pm

    What do you need help with? Please explain what you are trying to do?
    Ivy

  45. charlotte says:
    January 10, 2010 at 3:57 pm

    can you please help me with my footer

  46. Tomas says:
    October 26, 2009 at 6:48 pm

    Thanks for the code – works well.
    I had to fix the double and single quotes too.

    -t

  47. admin says:
    October 7, 2009 at 7:09 pm

    Hi James, Yeah the curly quotes appear different in the font that I am using. I will change the font of the code block.

  48. James says:
    October 7, 2009 at 9:01 am

    Hi,

    Nice code – thanks for sharing. Just thought you may like to know – the curly quotes in the ‘copied’ code gave me a few problems but once replaced, all works nicely.

  49. admin says:
    March 26, 2009 at 7:17 pm

    Its hard to tell what the exact problem is without looking at the code in detail but looks like you are missing a semi-colon (;) or you have a bracket placed in the wrong position. I would look for a missing semi colon just above the line where its complaining.

  50. Zach says:
    March 19, 2009 at 6:10 pm

    What am I missing here? Any help would be greatly appreciated. I have viewed other entries on this topic, and your code has a lot less and less steps than theirs. Hum.

    functions.php

    index.php (where I want the widget to be, on the landing page only)
    What Our Clients Are Saying…

    here is the error I get when I select the Theme in Theme Viewer to activate it:

    Parse error: syntax error, unexpected ‘)’, expecting ‘(‘ in /home/content/z/a/c/zacharyrs20000/html/mibsolutionsllc/wp-content/themes/w2/functions.php on line 3

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