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

Tags: Blog Setup, Web development, web masters, Wordpress, WordPress Theme, WordPress Tweaks

Similar posts that you may like

#1 by Zach on March 19, 2009 - 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

#2 by admin on March 26, 2009 - 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.

#3 by James on October 7, 2009 - 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.
James´s last blog ..A Complex Project Using WordPress

#4 by admin on October 7, 2009 - 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.

#5 by Tomas on October 26, 2009 - 6:48 pm

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

-t
Tomas´s last blog ..At least one defendant will stand trial in Jenner killing

#6 by charlotte on January 10, 2010 - 3:57 pm

can you please help me with my footer

#7 by Ivy on January 10, 2010 - 6:25 pm

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

#8 by pak on January 20, 2010 - 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

#9 by melandriaromero on January 25, 2010 - 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.

#10 by admin on January 26, 2010 - 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.

#11 by John on February 19, 2010 - 3:38 pm

Thanks for posting this info! It’s really helped me a bunch as I’ve made changes to my template.
John´s last blog ..GI Joe ID Quiz

#12 by Nate on February 22, 2010 - 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!)

#13 by durian on March 25, 2010 - 9:23 pm

thank you. it works in my other blog.

#14 by Brian on April 8, 2010 - 2:14 pm

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

#15 by admin on April 9, 2010 - 3:25 am

Can you explain a little bit more please?

#16 by akis on April 15, 2010 - 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!

#17 by Gabriel on April 15, 2010 - 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

#18 by Abraham on April 16, 2010 - 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.
Abraham´s last blog ..Spying on your visitors

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

#20 by admin on April 17, 2010 - 11:50 pm

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

#21 by rob on April 19, 2010 - 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?

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

reinstalled php files!

#23 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.

#24 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

#25 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!

#26 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.

#27 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

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

Registration page will have three main parts

1. Header
2. Content
3. Footer

#29 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.

#30 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.

#31 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).

#32 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

#33 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:

#34 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.

#35 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!

#36 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/

#37 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.

#38 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.

#39 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

#40 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

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

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

#42 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.

#43 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..

#44 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

#45 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

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

Very useful and to the point! Thanks for sharing!

#47 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…

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