How to Add Widgets to WordPress Theme's Footer

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
1. Registering the Sidebars in the WordPress Theme
2. Inserting the Sidebars In the WordPress Theme
3. Putting some style into the sidebars

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

Articles you may also like:

#1 by Kevin on February 3, 2011 - 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!

#2 by Richard on February 2, 2011 - 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

#3 by teddy on February 1, 2011 - 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.

#4 by Bella on January 6, 2011 - 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.

#5 by Nick on January 3, 2011 - 5:58 pm

you made my day

#6 by John Gamings on January 3, 2011 - 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

#7 by LacyG on December 9, 2010 - 8:41 am

Just what I needed, thank you.

#8 by DUB on December 4, 2010 - 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

#9 by Ellisgeek on December 2, 2010 - 1:32 pm

Thanks for this helped a lot

#10 by marianney on November 29, 2010 - 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!!

#11 by marianney on November 29, 2010 - 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?

#12 by marianney on November 28, 2010 - 11:01 pm

What if my functions.php does not have either line you specify
if ( function_exists(‘register_sidebar’) )
etc.?
.-= marianney´s last blog ..gratitude 4 for thanksgiving! =-.

#13 by magnexor on November 27, 2010 - 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
.-= magnexor´s last blog ..iPhone 42 Software Update – What’s in it =-.

#14 by PTEC on November 23, 2010 - 8:01 am

Thank you for your useful post

#15 by andre on November 23, 2010 - 3:55 am

hi thank you now i can show more widget on my footer themes, thank you thank you thank you
.-= andre´s last blog ..Dancing With The Stars 2010 ABC Finale- Who Gets Your Vote – Bloginity blog =-.

#16 by sarin on November 9, 2010 - 10:32 pm

thankyou very much……footer sidebar is very useful.

#17 by chris on November 4, 2010 - 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

#18 by tomek on September 29, 2010 - 9:03 am

thx a lot it does the job!

#19 by Chase on September 19, 2010 - 10:08 pm

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

#20 by Nikki on September 19, 2010 - 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.

#21 by admin on September 5, 2010 - 9:41 pm

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

#22 by alecs on September 4, 2010 - 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.

#23 by WordPress Services on August 9, 2010 - 6:25 pm

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

thank you for sharing.
.-= WordPress Services´s last blog ..Improve Website Reputation Article Submission Services =-.

#24 by Franco on August 7, 2010 - 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…

#25 by Cristian on July 25, 2010 - 10:52 am

Very useful and to the point! Thanks for sharing!

#26 by Manthan on July 16, 2010 - 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.
.-= Manthan´s last blog ..Why I Love Reddit =-.

#27 by dhanasekar on July 6, 2010 - 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

#28 by dhanasekar on July 6, 2010 - 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..

#29 by admin on June 19, 2010 - 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.

#30 by jean pierre on June 18, 2010 - 9:35 am

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

#31 by simon on June 17, 2010 - 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

#32 by beyondokc on June 10, 2010 - 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!
.-= beyondokc´s last blog ..Malware Infection by Advertising =-.

#33 by John Media @ dedicated hosting on June 9, 2010 - 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.

#34 by admin on June 1, 2010 - 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.

#35 by stacey on May 31, 2010 - 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/

#36 by stacey on May 31, 2010 - 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!

#37 by Kat on May 25, 2010 - 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.

#38 by admin on May 25, 2010 - 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:

#39 by Kat on May 24, 2010 - 10:50 pm

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

#40 by admin on May 23, 2010 - 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).

#41 by Kat on May 22, 2010 - 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.

#42 by william on May 18, 2010 - 6:38 pm

Thanks that was very good..
m liking your site very much thanks for all the great
information.
.-= william´s last blog ..Ten Non-Techie Ways To Market Your Book Online. =-.

#43 by anwer on May 18, 2010 - 10:51 am

Registration page will have three main parts

1. Header
2. Content
3. Footer

#44 by webeno on May 16, 2010 - 4:06 pm

Great help, thank you!
I linked to your post in mine: How to add sidebar (widget) placeholder in WordPress
.-= webeno´s last blog ..CSS Equal Height Columns =-.

#45 by admin on May 8, 2010 - 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.

#46 by Daphne on May 7, 2010 - 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!
.-= Daphne´s last blog ..Welcome! =-.

#47 by Roeg on May 4, 2010 - 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

#48 by admin on April 20, 2010 - 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.

#49 by rob on April 19, 2010 - 10:10 am