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:
<?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 Widgets */
#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.
About Don Caprio
cool post
I did exactly as you said above and when I put something in the widget, they kind of stack over each other. the second one stacks over the first and the third overlaps the second…
The CSS part should take care of that. It’s the exact code I’m using right on this blog.
Twitter: ladycovs
says:
Cool Don,i did exactly what you explained and i could see my newly created widgets.
You can check out my blog to see the new widgets.Just hit on my name above.
It’s absolutely amazing! I don’t know how to express my joy but only God will bless you for helping others.
You gave my instant solution to my problem as soon as i messaged you on facebook.
Thanks.
Twitter: otodeluxe
says:
Don please can you tell me how to embed html code in a wordpress post, like the one you use to display this code.Thanks
You first need to parse it here – http://www.doncaprio.com/2011/07/online-html-to-ascii-converter.html
When editing, you must never use Visual Editor or the whole code will be messed up. You must use HTML editor throughout the time you’ll spend composing the post
Twitter: otodeluxe
says:
Thanks bro! I thought as much.
Nice one. Looks cool.
Hi!
This is my footer.php, at the begining of your great tutorial you wrote /paste the code below just before the closing ?>/ but I can’t find ?> , so please can you tell me where to insert that first code
Thanks a lot
Dario
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<?php
/* File: functions.php
* Version: 0.3
* /
/* Set the file path based on whether the Options Framework is in a parent theme or child theme */
if ( STYLESHEETPATH == TEMPLATEPATH ) {
define('OF_FILEPATH', TEMPLATEPATH);
define('OF_DIRECTORY', get_bloginfo('template_directory'));
} else {
define('OF_FILEPATH', STYLESHEETPATH);
define('OF_DIRECTORY', get_bloginfo('stylesheet_directory'));
}
define('GABFIRE_INC_PATH', OF_FILEPATH . '/inc');
define('GABFIRE_INC_DIR', OF_DIRECTORY . '/inc');
define('GABFIRE_FUNCTIONS_PATH', OF_FILEPATH . '/inc/functions');
define('GABFIRE_JS_DIR', OF_DIRECTORY . '/inc/js');
require_once (GABFIRE_INC_PATH . '/theme-init.php'); // Custom functions and plugins
// Paste your custom functions below this line
You’re dealing with functions.php in the first step, not footer.php. It ought to be there. Do chech
Dear Bro.,
i am fan of you, i am waiting your new post everyday.
i have install this 3 column, and fixed it just some edit…
Edit…………………………………
Engr. Jamal recently posted..Cheat Codes of Nokia Mobile Phones
Thanks Jamal. I’m glad you found it useful and worked for you!
thanks man it rilly helped
http://www.cybernaija.info
crack-kid recently posted..Unlock your locked memory card
thanks don the stuff worked excelently i had some difficulties at the beginning
crack-kid recently posted..Unlock your locked memory card
Buddy this is my : Functions.php
I can find this in your instructions
<?php
/** Start the engine */
require_once( get_template_directory() . '/lib/init.php' );
require_once( get_stylesheet_directory() . '/lib/style.php' );
/** Child theme (do not remove) */
define( 'CHILD_THEME_NAME', 'Copyblogger Theme' );
define( 'CHILD_THEME_URL', 'http://www.copyblogger.com/copyblogger-theme-wordpress/' );
/** Add Viewport meta tag for mobile browsers */
add_action( 'genesis_meta', 'copyblogger_viewport_meta_tag' );
function copyblogger_viewport_meta_tag() {
echo '’;
}
/** Add support for custom background */
add_custom_background();
/** Relocate the post info function */
remove_action(‘genesis_before_post_content’, ‘genesis_post_info’);
add_action(‘genesis_before_post_title’, ‘genesis_post_info’);
/** Customize the post info function */
add_filter( ‘genesis_post_info’, ‘post_info_filter’ );
function post_info_filter($post_info) {
if (!is_page()) {
$post_info = ‘by [post_author_posts_link] on [post_date] [post_comments] [post_edit]‘;
return $post_info;
}}
/** Modify the size of the Gravatar in the author box */
add_filter(‘genesis_author_box_gravatar_size’, ‘copyblogger_author_box_gravatar_size’);
function copyblogger_author_box_gravatar_size($size) {
return ’78′;
}
/** Add support for 3-column footer widgets */
add_theme_support( ‘genesis-footer-widgets’, 3 );
Hello Shree,
Seems like you’re using Genesis. Genesis works differently and has its own custom shortcodes. You may check this post for details on adding footer widgets to add footer widgets to genesis child theme – http://www.studiopress.com/tutorials/add-footer-widgets
Twitter: rmanroh
says:
Thanks a lot for this tutorial. I m not a developer and I was so confused how to manage different sections of my footer through admin and this tutorial really worked for me. Thanks a lot..!
Rohith VR recently posted..Samsung NP350V5C-S04IN Specifications & Price in India
Twitter: sdmmovies
says:
Great work thanks for sharing this tutorial. easy and great
Dear Don Caprio, thank you for this tutorial. It works!! It works!! thanks for sharing I’m happy Greetings from germany!
you’re welcome, Andy. Glad it worked for you.
Twitter: omoscowonder
says:
Don, you are simply the BEST.
just added this to my client website at Dailyschoolnews
now, he will know how qualified i am, all thanks to you bro.
Omoscowonder recently posted..How To Make Money Online Writing Articles
Twitter: kizipop
says:
I tried the code and some tweaks, it was great. nice job admin. I already made it for some of my sites. lots of happiness for me dude. Just as i wanted to do.
kizi pop recently posted..I Can Fly