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.
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)
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:
or
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:
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-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).
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 
#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.