Add a Widgetized Footer to Thesis

Thesis is a great theme and well known (though I personally prefer Headway for it’s drag & drop interface and easy customization), so I regularly get requests to customize Thesis for clients. Recently, I had a request to add a widget-ready (or “widgetized”) footer area to a Thesis blog. After a few Google searches, I found what I was looking for… except it didn’t quite work the way I’d hoped. Three widget areas for the footer were added, but they were stacked on top of each other, rather than displaying in a horizontal line.

Just a few edits to the code and CSS fixed that right up, though. If you’re looking to add a widget-ready (widgetized) footer to your Thesis blog, here’s what you need to do:

Go to Thesis Options –> Custom File Editor. Open custom_functions.php.

After the instructions on how to use the file, enter the following code as-is:

// Register the footer as a sidebar so that it will take our widgets!
register_sidebars(1,
    array(
        'name' => 'Footer',
        'before_widget' => '<li class="widget %2$s" id="%1$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    )
);
// Remove the existing Thesis links from the footer
remove_action('thesis_hook_footer', 'thesis_attribution');
remove_action('thesis_hook_footer', 'thesis_admin_link');
// Add the column for the footer. We can place as many widgets as we want here,
// though with the CSS we'll define, 3 will fit best.
add_action('thesis_hook_footer', 'customFooter');
function customFooter() {
	?>
<div class="footercustom">
<div class="col Footer1">
	<ul class="sidebar_list">
<?php	if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer') ){	?>
		<li class="widget">
			<div class="widget_box">
				<h3><?php _e('Footer Widget 1', 'thesis'); ?></h3>
				<p>You can edit the content that appears here by visiting your Widgets panel and
modifying the <em>current widgets</em> there.</p>
			</div>
		</li>
<?php		?>
	</ul>
</div>
<div class="cb"></div></div>
	<?php
}
?>

Then edit custom.css and add this code:

.custom div.col.Footer1 ul.sidebar_list { width:100%;}
.custom div.col.Footer1 ul.sidebar_list li.widget { width:30%; padding:0; margin:0 1%; float:left; display: inline;}

Voila! A new widget area appears in your Widgets dashboard area. Drag three widgets to area Footer1! They’ll be spaced evenly, centered across the bottom of your site wrapper.