Thesis 1.6 Widgitized Footer + Copyright Notice

by Matthew on December 31, 2009

I was just beginning to wonder how on earth I was going to pull of a widgitized footer with my limited PHP skills, and then I found a three-column widgitized footer framework already complete at Fergusweb Nework. Sweet! Thank you, Fergusweb Network! Here’s their code for the custom_functions.php file:

/*
 *	custom_functions.php
 *	To provide a custom three-column widget-ready footer to your Thesis theme.
 */
// Remove the existing Thesis links from the footer
remove_action('thesis_hook_footer', 'thesis_attribution');

remove_action('thesis_hook_footer', 'thesis_admin_link');
// Add three columns for our Footer widgets
add_action('thesis_hook_footer', 'customFooter');
function customFooter() {
	?>
<div class="col Footer1">
	<ul class="sidebar_list">
<?php	if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer1') ){	?>
		<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="col Footer2">
	<ul class="sidebar_list">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer2') ) { ?>
		<li class="widget">
			<div class="widget_box">
				<h3><?php _e('Footer Widget 2', '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="col Footer3">
	<ul class="sidebar_list">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer3') ) { ?>
		<li class="widget">
			<div class="widget_box">
				<h3><?php _e('Footer Widget 3', '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>
	<?php
}
// Register our three new columns as "Sidebars" so they can take widgets
register_sidebar(array('name'=>'Footer1', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));

register_sidebar(array('name'=>'Footer2', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));

register_sidebar(array('name'=>'Footer3', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));

With this code installed, you can dig into WordPress’ Widgets dashboard to drag things into your footer. You can get new widgets by installing additional plugins, or create your own widgets using the WP Custom Widget plugin. This makes it dead simple to put anything you want down there without having to edit your site code.

Fergusweb has also written a brief tutorial on how to create other widgitized areas. That’s the very stuff of excellence.

Now all that’s needed is some styling to make it all look nice. Without styling, the above code gives us three rows of widget areas, but I want to make that into three columns. Adding this to your custom.css file will give the footer some layout:

.custom #footer_area .col {
	width: 32.1%;
	padding: 0 0.6%;
	float: left;
	}

.custom #footer_area .cb {
	clear: both;
	}

Layout set, I can begin styling the appearance. If, for example, I wanted my footer to match my nav, I could add this:

.custom #footer_area {
	background-color: #000;
	border-top: 1px solid #f00;
	}

.custom #footer_area .page {
	background-color: transparent;
	}

From there, the usual styling of text, headers and hyperlinks should be in order.

To add a copyright notice, go back to the footer code we’ve just inserted into the custom_functions.php file. Towards the bottom of the code, locate this bit:

<div class="cb"></div>
	<?php
}

Replace it with this:

<div class="cb"></div>
	<?php
echo '
<div id="copyright">
<p>Copyright &copy; 2009–' . date('Y') . ' NAME. All rights reserved.</p>
</div>';
}

Leave a Comment

Previous post:

Next post: