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/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
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.
#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 🙂
The register_sidebar function should have added more widget option in the widgets menu.
mh.. the only thing is, the widget dashboard shows only one sidebar. if i add a widget its not displayed in the footer.
Excellent WordPress sidebar registration post. great info and very easy to understand.
thank you for sharing.
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…
Very useful and to the point! Thanks for sharing!
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.
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
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..
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.
were i can find the footer div how it looks?? kind regards
Just added to one of my blogs. Great. Seems very popular on alot of sites these days and declutters the sidebar.
Thanks much appreciated
Si
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!
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.
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.
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/
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!
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.
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:
http://pareandfocus.com/index.htm/wp-content/themes/photocrati-viewfinder/images/footer-fon2.jpg
Thanks so much, it’s at
pareandfocus.com
My name should link there too. Thanks again
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).
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.
Thanks that was very good..
m liking your site very much thanks for all the great
information.
Registration page will have three main parts
1. Header
2. Content
3. Footer
Great help, thank you!
I linked to your post in mine: How to add sidebar (widget) placeholder in WordPress
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.
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!
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 🙂
“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.
reinstalled php files!
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?
@Akis, the sidebars will be side by side… you should be able to add widgets to whichever one you want.
@Gabriel, Use the conditional tag is_home() to determine if the current page is home page then display the footer if it is.
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.
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
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!
Can you explain a little bit more please?
The sidebars don’t need names in the function.php?
thank you. it works in my other blog.
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!)
Thanks for posting this info! It’s really helped me a bunch as I’ve made changes to my template.
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.
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.
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
What do you need help with? Please explain what you are trying to do?
Ivy
can you please help me with my footer
Thanks for the code – works well.
I had to fix the double and single quotes too.
-t
Hi James, Yeah the curly quotes appear different in the font that I am using. I will change the font of the code block.
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.
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.
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