Written by: Steve Patterson
5/22/2009 3:25 PM 

Adding Widgets to your Wordpress Footer

I have a number of Wordpress blogs that I administrate and some have long sidebars with only one column which become too long for the content contained on the page. I have been looking for a way to move some of the sidebar widgets to the footer but this wasn't an option with the SimpleX theme that I am using. Then I came across Help-Developer.com and there great example of how to add widgets to your Wordpress footer.

Three files will need to be modified and you might need some customization of the css file based upon the theme you are using and the widgets you place into the footer. The first file is the style.css file. The code below should be added to this css file for the formatting of the sub-footer that you will later add.

#subfooter
{
    width: 100%;
    margin-left: 5px;
    margin-right: 5px;
    clear: both;
    height:340px;  
    background-color:#ffffff;  
}  

#subfooter .widget
{
    width: 320px;
    height:340px;  
    float: left;        
}  

#subfooter .widget .inner {  
    padding:10px;  
}  

#subfooter li {  
    list-style-type: none;  
    list-style-image: none;  
}  

#subfooter li ul {  
    padding-left:0px;  
    font-size:12px;  
}  

#subfooter a {  
    padding:5px;  
    width:90%;  
    text-decoration:none;  
    clear:both;  
    display:block;  
}  

#subfooter a:hover {  
    background-color:#1a6198;  
    color:#FFFFFF;  
}  

Next you need to modify the footer.php file to create the widget areas. The site mentioned above has code that did not work for me originally but after downloading their example I was able to find the correct code for my theme. Insert this code before your footer tags.

<div id="subfooter">    
    <div class="widget"><div class="inner">
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('subfooterleft') ) : ?>
    <?php endif; ?>
    </div></div>
    
    <div class="widget"><div class="inner">
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('subfootercenter') ) : ?>
    <?php endif; ?>
    </div></div>
    
    <div class="widget"><div class="inner">
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('subfooterright') ) : ?>
    <?php endif; ?>
    </div></div>
</div>

Finally, modify the file function.php to provide links to the sub-footer areas in your Wordpress widget administration screen. You will find code similar to the creation of the sidebar array in your file, you will need to add the last three lines below your current code.

<?php  
if ( function_exists('register_sidebar') )  
register_sidebar(array(  
'before_widget' => '<li id="%1$s" class="widget %2$s">',  
'after_widget' => '</li>',  
'before_title' => '<h2 class="widgettitle">',  
'after_title' => '</h2>',  
));  
register_sidebar(array('name'=>'subfooterleft'));  
register_sidebar(array('name'=>'subfootercenter'));  
register_sidebar(array('name'=>'subfooterright')); 

Trackback Print

Tags:

Categories:

Location: Blogs CapturedTech - Technology

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code Enter the code shown above in the box below
Add Comment   Cancel