Web produceR & SEO Analyst by profession! Traveler in Life!! Biker at Heart!!! Photographer by Passion!!!! Rider for Eternity!!!

Posts tagged “add widget to wordpress

How to add Widgets to WordPress Footer

Lately, i came across scores of Blogs with help me (tag) to WordPress Widget-footer when i was browsing other posts on the blogs

No Widgets in the footer simply means you are in nowhere when you want to read further, You reach the bottom of the post just to find that you have no place to go further.

BUT, if the page has a footer widgets, you are previlaged to access the site more, see other posts you may enjoy or simply the alluring comments placed. So having worked it out, I think I should share my “How to add Widgets to WordPress Footer.”

Here it goes…

There are really three main parts to introducing a footer-sidebar
1. Registering the Sidebars in the WordPress Theme
2. Inserting the Sidebars In the WordPress Theme
3. Putting some style into the sidebars

STEP 1:
Let WordPress acknowledge that you want to use three more widget positions, and they should be called “footer 1″, “footer 2″ and “footer 3″)

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

if ( function_exists(‘register_sidebar’) )

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

The above will register 3 sidebars (one that you already have and three more that you are about to introduce in the footer area of your wordpress theme).
STEP 2:
Insert the Sidebars In the WordPress Theme

Lets tuck in the sidebars to the exact loaction in the WordPress theme.Here, we will put the sidebars in the footer area of the theme. Dual Click the footer.php (Theme Functions) file and insert the accompanying code right on top of the ‘footer’ class

<div id=”footer-sidebar”>
<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>

STEP 3:
Trend the new footer divs, by adding div styles to your style.css file (note: I believe, you need to align the width parameters and other style elements, to suit your particular theme)

/* Footer Widgets */

#footerwidgets {
display: block;
}
#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;
}