Simple Way to Add Widgets to WordPress Theme Footer

This is the Guest by Francess. I am back with my new post that is How to Add Widgets to Wordpress Theme's Footer .I wanted to use the 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 the really three main parts to introducing a footer-sidebars :

• Registering the Sidebars in the WordPress Theme
• Inserting the Sidebars In the WordPress Theme
• Putting some style into the sidebars

1. Register the Sidebars in the WordPress Theme :

Go to WordPress theme's editor and open the Theme Functions (functions.php) file . Now Search for the following line in your Theme Functions (functions.php).

if the ( 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 now:

register_sidebar(array(
or
register_sidebars(2,array(

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 :

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’ divisions :

<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,now 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 is helpful! Now you dont have to change your beloved WordPress theme just to get footer-sidebar. Like This Post Go to Comments : )