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

Tips and Tricks HQ

  • Home
  • Blog
  • Projects
    • All Projects
    • Simple WP Shopping Cart
    • WP Express Checkout Plugin
    • WP Download Monitor
    • WP Security and Firewall Plugin
    • WP eStore Plugin
    • WP Affiliate Platform
    • WP eMember
    • WP Lightbox Ultimate
    • WP Photo Seller
  • 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

You are here: Home / Wordpress / 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. Amanda says:
    September 18, 2019 at 6:02 am

    Thank you for sharing this tutorial. I am trying to add custom widget in my theme but getting an unknown error. This is the code that I have been adding in functions.php. I have seen this code here https://www.wpblog.com/wordpress-custom-widget-area/ but not sure whetehr it’s working or not because when I am trying to add it in my site theme it not works.
    function widget()
    {
    register_sidebar(array(
    ‘name’ => __(‘Primary Sidebar’, ‘wpb’),
    ‘id’ => ‘primary_sidebar’
    ‘description’ => ”,
    ‘class’ => ”,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ));

    }
    add_action(‘widgets_init’, ‘widget’);

  2. Doma Tamang says:
    September 22, 2017 at 2:28 pm

    Thanks, It was exactly what I was looking for and also making it so simple and clear with examples 🙂

  3. Max says:
    May 27, 2017 at 2:43 am

    Thank you! It is what I am looking for.

  4. Tim says:
    June 24, 2015 at 5:13 pm

    Really nice…worked great – thanks for the details – you made this nice and easy!

  5. admin says:
    February 25, 2015 at 7:03 pm

    @Florence, you should ask your theme developer where this file is. All themes should have a functions.php file (or equivalent).

  6. florence says:
    February 25, 2015 at 5:34 pm

    Hi, this is the exact issue am having but unfortunately i dont have either the functions.php or the footer.php files in my theme. Should i just go ahead and create them and which folder should i dump them in. please save me like you saved the others tnx am waiting

  7. Ofer says:
    December 16, 2014 at 4:19 pm

    Thanks for that 🙂

  8. boris b says:
    August 28, 2014 at 7:32 am

    Thank you very much! You are a live saver!!!!

  9. Fer says:
    July 31, 2014 at 3:33 pm

    It was so useful that I could not leave without saying thank you.

  10. Polina says:
    June 27, 2014 at 4:37 pm

    Thank you, Your code worked like a charm for me! I just had to style the divs!

  11. Henry says:
    June 19, 2014 at 2:03 pm

    Thanks for the tutorial. The Codex is a heap load of info. Reading this makes it simple.

  12. Rob says:
    April 5, 2014 at 6:17 pm

    I know I sound like another broken record, but just wanted to say that this really helped me out. Thanks for taking the time to put this together!

  13. Jhony says:
    December 20, 2013 at 12:24 pm

    Thank you. I have stuffed around with the footer for hours. GREAT TUTORIAL

  14. chel says:
    December 9, 2013 at 3:54 pm

    OMG THANK YOU!!!!

    I am still in the process of styling this as I type but I can already tell this is TOTALLY going to work!

    You saved me a couple hundred dollars in designer/coding fees. I LOVE you! XOXQ! -chel

  15. Joe Njengah says:
    October 27, 2013 at 3:13 pm

    Awesome …..I had a serious headache getting to fix that 4 footer widgets and your tutorial was the best. Thanks so much for your help

  16. admin says:
    October 25, 2013 at 12:27 am

    @MEmilsson, Background of the footer widget or the whole theme?

  17. MEmilsson says:
    October 24, 2013 at 11:38 am

    Hi! Thanks very much for this.

    I got one question thou: How du I change background color to black (for example)?

    BR Mattias

  18. admin says:
    September 20, 2013 at 7:50 pm

    Use the “float” CSS property on the footer widget class and they should go side by side.

  19. MarketLincs says:
    September 20, 2013 at 8:58 am

    one more query,
    what would be code to keep those 3 footers side by side.Can any one help ..Thank you

  20. MarketLincs says:
    September 20, 2013 at 8:52 am

    This is really awesome.you are genius .I just added the code and it worked perfect.So we can add as many footer widget areas as we want .cheers

  21. Leo Saballos says:
    September 12, 2013 at 3:28 am

    Great Tutorial!! You Rock my friend! Like always I had to change some CSS Styles but is working! Thanks Bro.

  22. mohan perera says:
    September 9, 2013 at 2:31 pm

    Clean & Perfect tutorial. I added 3 column footer widgets to my site. Thanks

  23. Tony says:
    July 31, 2013 at 5:13 pm

    AWESOME. Works perfectly!

  24. Dave Allred says:
    July 23, 2013 at 8:29 pm

    Excellent tutorial! Worked right away and after adding a border, background color, box shadow and some text shadows, was exactly what I needed.

    You da man!

  25. admin says:
    April 6, 2013 at 6:44 pm

    @Raymond, you can create a “functions.php” file in your child theme if it doesn’t have one already. Then you should be good to go. WordPress will include the code from both your parent and child theme’s functions.php file and execute it.

  26. Raymond says:
    April 6, 2013 at 11:44 am

    How would you recommend doing this if you are using a child theme?

  27. Tom says:
    March 20, 2013 at 3:07 am

    Really great post. Currently i am customizing one theme named kelta wordpress theme and i was facing some difficulties in adding widget. Now this post will help me in customizing the widget. Thanks for sharing.

  28. DirtyDazz says:
    February 2, 2013 at 9:57 am

    easy tut to follow and worked a charm.. I’m thinking of placing some other widget slots in other areas using the same principle.

    Cheers, DirtyDazz,

  29. cowabango says:
    January 29, 2013 at 1:08 pm

    Great tutorial, simple and to the point. Best of all, IT WORKS! Lol.

  30. Steve says:
    December 9, 2012 at 4:57 am

    This is an awesome tutorial. I was looking for a straightforward tutorial on how to add widgets to a website footer in WP and this was one of the best ones I found.

  31. mkfolio says:
    July 6, 2012 at 4:59 am

    Its awesome.. this is what I’m looking for.. thanks.

  32. beedo says:
    June 7, 2012 at 10:33 pm

    Thank you. You made my day. People need to know some back ground have some background with coding before dealing with that ;).

  33. Ashish Negi says:
    May 29, 2012 at 8:46 am

    Just used your tutorial to embed widgets in the footer for my theme. I was about to change my theme for additional widget areas. Thanks for the hack. Really easy and reliable. Works like magic

  34. Steve Peck says:
    May 18, 2012 at 10:03 am

    This tutorial is pretty close to perfect. I know it did what I needed it to.. Only thing different was the fact that I had to find the if statement in a different location, but once i di this worked flawlessly.

    Thanks!

  35. Boky says:
    May 17, 2012 at 11:01 am

    Great arcticle and very helpfull! Thx!!

  36. Rohit says:
    May 3, 2012 at 2:30 am

    Thank you for your good snippet.

  37. joan says:
    April 14, 2012 at 12:13 am

    Really works, thanks for the trick!

  38. Tom Watson says:
    March 4, 2012 at 12:14 pm

    Very useful post. I really appreciate your blog.
    Thanks

  39. Raghvendra says:
    February 24, 2012 at 6:57 pm

    Thanks for this tutorial dude…
    I its just a great job..keep it up

  40. Maria says:
    February 15, 2012 at 2:40 pm

    Does anyone know how to add a FOURTH footer area to TwentyEleven? I am using a Twenty Eleven child theme.

    Thanks.

  41. Abir Ganguly says:
    February 15, 2012 at 8:21 am

    Thanks a lot. its really grt tutorial..

  42. liryc says:
    January 27, 2012 at 10:20 pm

    Wow, thank you very much, this is what I’ve been looking for, I am now editing my template. 😀 Keep it up!

  43. Jimmy says:
    December 19, 2011 at 10:20 pm

    Thanks for the help. Worked out perfect.,

  44. aero says:
    December 15, 2011 at 7:55 am

    I love to tackle problems like these and i was going to try and solve this myself but you beat me to it 🙂 and saved me a lot of time. Thanks! I have a nice theme and wanted to display weather forecast widget in the footer and it works perfectly.

  45. JJSWP says:
    December 14, 2011 at 5:43 pm

    Thanks, this worked very well for me. I just had to tweek the code a bit by putting the named dyanamic widget as opposed to number assignments.
    Thank you

  46. Jamil says:
    November 26, 2011 at 4:29 am

    Good artilce specially for beginners. Now i have learnt the art of adding widgets in footer as well. Will implement it in my next theme.

    Thanks

  47. Magento development says:
    November 18, 2011 at 6:13 am

    Really great tips. As i want to learn wordpress so this post might help me…

  48. [email protected] says:
    November 10, 2011 at 3:29 am

    That was a simple code trick, and yet so many people find it difficult. We used tables for so long to get that effect. Thanks.

« Older 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

wordpress estore plugin
wordpress membership plugin
WP Express Checkout Plugin
WordPress Lightbox Ultimate Plugin
WordPress photo seller plugin
wordpress affiliate plugin

Recent Posts

  • 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 [...]
  • PayPal QR Codes [...]

Comment & Socialize

  • @Rodrigo Souza, Thank you f ...
    - admin
  • The example for 'slm_add_ed ...
    - Rodrigo Souza
  • @Ron, All the valid transac ...
    - admin
  • Hello, when people have sel ...
    - Ron
  • We have hte following featu ...
    - 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 © 2023 | Tips and Tricks HQ