You are here:   Home
Register  |  Login
image
 RSS Subscribe
Minimize
 Blog Calendar
Minimize
 Share This
Minimize
 Captured Technology - Blog
Minimize
May 22

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')); 

Tags:

5 comment(s) so far...

Re: Adding Widgets to your Wordpress Footer

i am trying to learn wordpress since they say it's such a powerful tool... so i just need to copy/paste these and follow the steps...

By James on   5/27/2009 4:04 PM

Re: Adding Widgets to your Wordpress Footer

Nice tip for Wordpress user. Nowadays, every blog or site I visited is created by Wordpress. It seems Wordpress will conquer the www soon. :)

By F.Mary on   5/31/2009 3:38 PM

Re: Adding Widgets to your Wordpress Footer

I also have wordpress blog (about Forex investments) but I am not very skilled with html, so I can change only basic things on my website. I am now looking to change my footer and I guess your html code is what I am looking for. Thanks a lot!

By Rob Thomas on   6/1/2009 10:30 AM

Birmingham Accountants

It's a lot simpler than I thought it'd be. I had a look at developing my own Wordpress plugins a while back and got turned off at how complicated they looked. But this has given me the inspiration to tinker a bit more.

Cheers - and bookmarked!

By birmingham accountant on   6/24/2009 2:54 AM

Re: Adding Widgets to your Wordpress Footer

Its simple..thank you i always asking to myself how to do this ..

By Jess SEO on   7/31/2009 4:40 PM

Your name:
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
 Blog Directory
Minimize
 Mobile Version
Minimize
Add CapturedTech - Technology Mippin widget
 Sponsors
Minimize
IIntroducing TUL Exclusively at OfficeMax 120x600

u comment, i follow