How to create a footer widget?

Add Widgets To Your WordPress Footer – Easy How To Guide

I’ve been noticing that WordPress blogs with widgetized footers, help ME when I visit to find other interesting posts on the blog.
Without widgets in the footer, you know the problem … You read a good post, get to the bottom of the page, then wonder where to go next.
BUT, if the page footer contains widgets, chances are you will immediately see other post titles or enticing comments, which help you to find other posts you may enjoy.
So having realized this from my own blog reading behavior, I thought I really should put widgets in my own footer, here at
I’ve just done it and you can see the new widgets in the footer here (if you page down). I have added three side by side widget areas to the footer.
So having worked it out, I think I should share my “easy how-to guide” to widgetizing your WordPress footer.
Here goes…
STEP 1: Tell WordPress you want to use three more widget positions, and they should be called “footer 1″, “footer 2″ and “footer 3″)
Use the theme editor for your current theme, to add an extra line of code to the functions.php file. It’s the 3rd line below, beginning register_sidebars(3, array…

if ( function_exists(‘register_sidebar’) )
{ register_sidebar();
register_sidebars(3, array(‘name’=>’Footer %d’)); }
STEP 2: Add the extra widget positions to your theme’s footer
Again using the theme editor, add this to your footer.php file…

<div id=”footerwidgets”>
<div id=”footer-left”>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘footer 1’) ) : ?>
<?php endif; ?>
<div id=”footer-middle”>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘footer 2’) ) : ?>
<?php endif; ?>
<div id=”footer-right”>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘footer 3’) ) : ?>
<?php endif; ?>
<br clear=”all” />
STEP 3: Style the new footer divs
Add these div styles to your style.css file.
(note: you will probably need to adjust the width parameters and other style elements, to suit your particular theme)

/* Footer Widgets */
#footerwidgets { display: block; width:900px; margin: 0 auto; text-align:center; }
#footer-left { width: 210px; float: left; margin: 15px 10px 10px 30px; padding: 10px; background-color: #f3f3e7; }
#footer-middle { width: 210px; float: left; margin: 15px 10px 10px 15px; padding: 10px; background-color: #f3f3e7; }
#footer-right { width: 210px; float: left; margin: 15px 10px 10px 15px; padding: 10px; background-color: #f3f3e7; }
I hope that helps. You will need to adjust to your particular theme and requirements, but that is exactly what I have just done here and you can see the result.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>