How to Add Widgets to WordPress Theme’s Footer

Categories: Wordpress

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:

Registering the Sidebar(s) in the WordPress Theme
Inserting the Sidebars In the WordPress Theme
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.

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.

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

#1 by admin on April 6, 2013 - 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.

#2 by Raymond on April 6, 2013 - 11:44 am

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

#3 by Tom on March 20, 2013 - 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.

#4 by DirtyDazz on February 2, 2013 - 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,

#5 by cowabango on January 29, 2013 - 1:08 pm

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

#6 by Steve on December 9, 2012 - 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.

#7 by mkfolio on July 6, 2012 - 4:59 am

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

#8 by beedo on June 7, 2012 - 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 .

#9 by Ashish Negi on May 29, 2012 - 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

#10 by Steve Peck on May 18, 2012 - 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!

#11 by Boky on May 17, 2012 - 11:01 am

Great arcticle and very helpfull! Thx!!

#12 by Rohit on May 3, 2012 - 2:30 am

Thank you for your good snippet.

#13 by joan on April 14, 2012 - 12:13 am

Really works, thanks for the trick!

#14 by Tom Watson on March 4, 2012 - 12:14 pm

Very useful post. I really appreciate your blog.
Thanks

#15 by Raghvendra on February 24, 2012 - 6:57 pm

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

#16 by Maria on February 15, 2012 - 2:40 pm

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

Thanks.

#17 by Abir Ganguly on February 15, 2012 - 8:21 am

Thanks a lot. its really grt tutorial..

#18 by liryc on January 27, 2012 - 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!

#19 by Jimmy on December 19, 2011 - 10:20 pm

Thanks for the help. Worked out perfect.,

#20 by aero on December 15, 2011 - 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.

#21 by JJSWP on December 14, 2011 - 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

#22 by Jamil on November 26, 2011 - 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

#23 by Magento development on November 18, 2011 - 6:13 am

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

#24 by Anuj@wpblogtips on November 10, 2011 - 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.

#25 by Robin on November 4, 2011 - 2:27 pm

Pretty useful to setup a widget at the footer. Great write up as well.

Robin.

#26 by welders on November 2, 2011 - 12:25 am

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

#27 by Templates on October 23, 2011 - 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

#28 by Philippines Virtual Assistant on October 5, 2011 - 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.

#29 by Lusi on October 4, 2011 - 12:06 am

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

#30 by jewel on October 1, 2011 - 3:50 pm

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

#31 by Chelle on September 27, 2011 - 3:38 am

Worked beautifully Thank you for the easy step by step copy and paste instructions

#32 by Kulwant Nagi on September 22, 2011 - 4:11 am

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

#33 by Vijay on September 12, 2011 - 11:02 pm

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

#34 by aya on September 3, 2011 - 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

#35 by aya on September 3, 2011 - 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!!!

#36 by Paul on September 1, 2011 - 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.

#37 by admin on August 30, 2011 - 11:26 pm

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

#38 by aya on August 30, 2011 - 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!!!

#39 by SwaEgo on August 30, 2011 - 12:13 am