Unlike the theme I was using on blogger, the theme I started with on this wordpress blog never came with a three column footer widget area and I needed it badly. Stacking all my widgets on both sidebars isn’t the best practice: Your visitors reads through your post and what next? The comment box and then, footer credit? That’s so boring 🙂 Creating a three column widget are in your wordpress theme’sfooter makes your visitors explore your site a bit further than they probably would without those widgets. Adding your popular posts and other suggested reading keeps them a bit longer and contributes to reducing your blog’s bounce rate.
I searched for a plugin to get this done but didn’t find one. I also read quite a lot of blogs on this topic but trust me, none of them worked. Maybe it’s because those tutorials were meant for older versions of wordpress but I had to tweak things just to make that widget area appear. I’m not a wordpress guru but you should definitely know how to work your way around things if you’ve been tweaking blogger templates for two years. lol.
Anyway, follow these steps to add that widget area to your blog’s footer in case it didn’t come with one. It’s only a four-step process:
1. Go to Appearance > Editor > Open Theme Functions (functions.php) and paste the code below just before the closing ?>
'name' => 'Footer %d',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
register_sidebar(4, array(
'name' => 'Footer %d',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
register_sidebar(5, array(
'name' => 'Footer %d',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
Did you notice these three lines in the code above?
register_sidebar(3, array(
register_sidebar(4, array(
register_sidebar(5, array(
The numbers follow the order 3, 4, 5 because I already have 2 sidebars registered in the template, one on the left and the other on the right. See that?
If your template comes with just one sidebar, the numbers should be 2, 3 4 instead.
register_sidebar(2, array(
register_sidebar(3, array(
register_sidebar(4, array(
Don’t forget that!
2. Now lets make the widget appear in the footer, alright? Open your footer.php and paste this in the line before the footer credits. Mine happens to be the 2nd line:
<div id="footer-sidebar1">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(3) ) : ?>
<?php endif; ?>
</div>
<div id="footer-sidebar2">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(4) ) : ?>
<?php endif; ?>
</div>
<div id="footer-sidebar3">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(5) ) : ?>
<?php endif; ?>
</div>
</div>
<div style="clear-both">
Check the screenshot below:
3. We’re almost done now. What needs to be done next is styling the widget area, ok? Open styles.css and paste this at the very bottom:
#footer-sidebar {
display: block;
width:950px;
margin-right:0;
background: #ffffff url(http://4.bp.blogspot.com/-jHinxEvkwYg/Tpm7HN_MuJI/AAAAAAAABc0/FGc9GJDxzUc/s1600/BlueFadeBackground.png) left top repeat-x;
}
#footer-sidebar1 {
width: 260px;
float: left;
margin: 15px 10px 10px 30px;
padding: 10px;
background-color: #ffffff;
}
#footer-sidebar2 {
width: 260px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #ffffff;
}
#footer-sidebar3 {
width: 260px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #ffffff;
}
I styled it based on my own taste and you can change the style if you’re not satisfied with it. You can change the width of the sidebars appearing at he footer and change the background, it’s all up to you.
4. Now you’re good to go. The widget area won’t appear at the footer till you add one or two widgets, ok? Go to appearance > Widgets > You should now see your newly registered footer widget area. Add some widgets and check your blog to see if it appears or not.
Hey, that’s the exact tweak I’m using on this theme and one other theme I tried earlier so I see no reason why it shouldn’t work for you. Any problem, drop it in the comment box. If it works for you, don’t forget to hit the google +1 button.