Make A Widget Ready Footer In WordPress

Posted on 02. Oct, 2009 by Alex Denning in Quick Tips

One of my favourite features of both Biblioteca and WPShout has to be the footer. With three columns and being widget ready, it’s pretty awesome!

How do you create something like this? It’s actually pretty simple. First, you need to create the boxes with some CSS. I’m sure I’m doing this really inefficiently, but hey nevermind. Do it this way and it’s easier later on to replace a box with a widened other box.

.footerinside {
	width:292px;
	padding:10px;
	float:left;
	margin:10px 10px 10px 0;
	background:#fff;
	height:460px;
}
.footerinside p {
	font-style:italic;
	color:#555;
	font-size:80%;
}
.footerinside li {
	margin-left:20px;
	padding:5px 0;
	list-style:square;
	}

.footerinsideright {
	width:292px;
	padding:10px;
	float:right;
	margin:10px 0 10px 0;
	background:#fff;
	height:460px;
}

.footerinsideright p {
	font-style:italic;
	color:#555;
	font-size:80%;
}
.footerinsideright li {
	margin-left:20px;
	padding:5px 0;
	list-style:square;
	}

Next, open up your footer.php file and add the following:

 <div class="footerinside">
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Left') ) : ?>
		<h3>Widgetised area</h3>
		<p>This is a widgetised area. To fill it with 'stuff', use the Footer Left widget</p>
		<?php endif; ?>
	</div><!-- end footer left -->

	<div class="footerinside">
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Center') ) : ?>
			<h3>Best of <?php bloginfo('name'); ?></h3>
			<p><b>The best of <?php bloginfo('name'); ?></b> - the most commented posts.</p>
		<p>This is a widgetised area. To fill it with 'stuff', use the Footer Center widget</p>

		<?php endif; ?>
	</div><!-- end footer central -->

	<div class="footerinsideright">
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Right') ) : ?>
		<h3>Widgetised area</h3>
		<p>This is a widgetised area. To fill it with 'stuff', use the Footer Right widget</p>
		<?php endif; ?>
	</div><!-- end footer right -->

What we’ve just added are three widget ready areas to our footer. You’ll need to activate these widget ready areas using the functions.php file, as we discussed last week:

if ( function_exists('register_sidebar') )
    register_sidebar(array(
		'name' => 'Footer Left',
	    'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));

	if ( function_exists('register_sidebar') )
    register_sidebar(array(
		'name' => 'Footer Center',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));

	if ( function_exists('register_sidebar') )
    register_sidebar(array(
		'name' => 'Footer Right',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));	

And with that, we’re done! You’ve now added to your WordPress theme an awesome three column footer which is widget ready! Any questions, feel free to leave a comment. And want a theme with this built in? Check out Biblioteca.

Related posts:

1. Featured Content For WordPress

Tags: Widgets

Enjoyed the post? We'll see you on Twitter or in your RSS reader!