Make A Widget Ready Footer In WordPress
Posted on 02. Oct, 2009 by Alex Denning in Uncategorized
One of my favourite features of both Biblioteca and WPShout has to be the footer. With three columns and being widget ready, it’s pretty awesome!
How do you create something like this? It’s actually pretty simple. First, you need to create the boxes with some CSS. I’m sure I’m doing this really inefficiently, but hey nevermind. Do it this way and it’s easier later on to replace a box with a widened other box.
.footerinside {
width:292px;
padding:10px;
float:left;
margin:10px 10px 10px 0;
background:#fff;
height:460px;
}
.footerinside p {
font-style:italic;
color:#555;
font-size:80%;
}
.footerinside li {
margin-left:20px;
padding:5px 0;
list-style:square;
}
.footerinsideright {
width:292px;
padding:10px;
float:right;
margin:10px 0 10px 0;
background:#fff;
height:460px;
}
.footerinsideright p {
font-style:italic;
color:#555;
font-size:80%;
}
.footerinsideright li {
margin-left:20px;
padding:5px 0;
list-style:square;
}Next, open up your footer.php file and add the following:
<div class="footerinside">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Left') ) : ?>
<h3>Widgetised area</h3>
<p>This is a widgetised area. To fill it with 'stuff', use the Footer Left widget</p>
<?php endif; ?>
</div><!-- end footer left -->
<div class="footerinside">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Center') ) : ?>
<h3>Best of <?php bloginfo('name'); ?></h3>
<p><b>The best of <?php bloginfo('name'); ?></b> - the most commented posts.</p>
<p>This is a widgetised area. To fill it with 'stuff', use the Footer Center widget</p>
<?php endif; ?>
</div><!-- end footer central -->
<div class="footerinsideright">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Right') ) : ?>
<h3>Widgetised area</h3>
<p>This is a widgetised area. To fill it with 'stuff', use the Footer Right widget</p>
<?php endif; ?>
</div><!-- end footer right -->
What we’ve just added are three widget ready areas to our footer. You’ll need to activate these widget ready areas using the functions.php file, as we discussed last week:
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer Left',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer Center',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer Right',
'before_title' => '<h3>',
'after_title' => '</h3>',
)); And with that, we’re done! You’ve now added to your WordPress theme an awesome three column footer which is widget ready! Any questions, feel free to leave a comment. And want a theme with this built in? Check out Biblioteca.
Enjoyed the post? We'll see you on Twitter or in your RSS reader!
WPShout is hosted by the fine folks at WPWebHost.
You can get exactly the same hosting as WPShout has for $7.95/month with WPWebHost's Freedom Plan.
Plus get 30% off the Freedom Plan with the code WPSHOUT.
Alex Denning is the founder of WPShout. A WordPress developer from London, Alex is a keen musician and freelance writer and developer.
You can find Alex on Twitter.
17 Responses to “Make A Widget Ready Footer In WordPress”
Trackbacks/Pingbacks
Add a widgetised footer with columns in WordPress…
One of my favourite features of both Biblioteca and WPShout has to be the footer. With three columns and being widget ready, it’s pretty awesome!
……
Leave a Reply
- WordPress Theme Design Basics
- Create An Advanced Options Page in WordPress
- Premium Frameworks Reviewed
- Creating A Tumblog With WordPress
- 10 Practical WordPress Security Tips
- A to Z of WordPress .htaccess Hacks
- WordPress Theme Design Basics
- 10 WordPress Plugins That Every Blog Needs
- 10 Awesome Things To Do With WordPress' Custom Fields
- How To Stop An Eithical Hacker Breaking Into Your WordPress Site
Get The Hosting
WPShout is hosted by the fine folks at WPWebHost who ensure everything runs smoothly.
You can get exactly the same hosting as WPShout has for $7.95/month with WPWebHost's Freedom Plan.
Plus get 30% off the Freedom Plan with the code WPSHOUT.
Get The Look
WPShout uses the WooFramework in order to ensure everything looks lovely and runs properly.
You can get the WooFramework with all WooThemes from $15/month and use the same code as WPShout.
Ashfame
02. Oct, 2009
Yes its pretty easy to widgetise any area you want.
.-= Ashfame´s last blog ..Fix bb_attachments plugin of bbPress =-.
Simon Wells
12. Oct, 2009
Hey great tutorial.
I am trying to get this to work on my Concept theme.
Now, I have managed to get the widget areas to appear with selected test widgets, but no matter what I do, I just can’t get it to appear in the footer, it just places it in the right sidebar.
Next step is to try and get it to be styled like the right sidebar widget area, using the top, side and bottom images.
Will let you know, if I ever get it up and running.
Simon Wells
12. Oct, 2009
Just an update, with a bit of tweaking to my css, I have now got my 3 widget areas in the footer.
Thanks for such a useful tutorial.
.-= Simon Wells´s last blog ..New Site Launch =-.
Si
19. Jan, 2010
I’m trying to get this to work on my site but having problems.
IS the code above additional to the code already in my footer/css files, or should I just replace current footer code with the above?
Thanks
Si
19. Jan, 2010
Managed to get the footer to work – but now it is dragging in the same content as my other three sidebars…
Alex Denning
20. Jan, 2010
Did you change the name of the widget area?
RozaniGhani
25. Feb, 2010
This tutorial is very good. Its very good for non license template to modify. However, licensed template cannot edit footer intact. I’m going to solve my template using your code.
Chad
13. Jul, 2010
Thanks for the code….everything worked great. The three column layout at the footer really steps up the design of a blog. I started with the Neutra template but have made several revisions to get a look that fits with my company website.
D S
20. Jul, 2010
thanks, worked out well, will have a new footer soon
kelly
12. Aug, 2010
Just implemented this on my site…how do you make columns expand as content expands? Will give credits for this tip in awhile. Thank you!
Shauna
18. Aug, 2010
Thanks for the great tutorial. But I can’t seem to get the footer to be an active widget. I can see it on my web site, but it doesn’t show up in my “widgets.” I tried putting the code for my functions.php in between but that failed. Thanks for your help.
JerrySichting
15. Feb, 2011
Awesome tutorial, are there any popular footer widgets we can download and install instead?
brian
18. Feb, 2011
I’ve tried using this to add three widget areas to my blog, mylardreams.com, and I’m having some problems.
First, I was able to have two footer widget sections show up on the widgets page where I could add widgets to those areas, but the third section doesn’t show up.
Second, I can’t seem to get the widgets centered in the bottom of my blog. They’re spaced too far apart.
Any help?
brian
18. Feb, 2011
I need to add one other thing. In the sidebar on my mylardreams.com site, there is an artifact at the top of the sidebar that I can’t get rid of. That first “Our Sponsors” box that is empty at the top of the page isn’t supposed to be there. On the widgets page the “Pages” widgets is the first box in the sidebar. Any idea how to get rid of that top box?
Akshit
30. May, 2011
It is showing an error in mine :
Fatal error: Call to undefined function get_footer1() in C:\xampp\htdocs\wordpress\wp-content\themes\trial\index.php on line 84.
I couldnt understand the error .My line 84 just has “”. What could be the problem ?
Kulwant Nagi
22. Sep, 2011
Thnx thnx thnx a lot.. u solved my big problem.. This Code is perfect and working Fine on my Blog… Hats Off to your coding…
See u Soon…