Thesis Footer Tutorial for Author Blog

Add Footer Widgets to Thesis

This post shows how I add footer widgets to my Semiomantics Thesis site as my site starts looking like a real website, however there is still room to provide more informative content, namely in the footer area.

The task is an easy one with Thesis but there is to be said that it is surprising that thesis does not offer these features in the core script.

Depending on the width of your site, you may choose a three or four column widgetized footer area.

Add Widgetized Footer to Thesis – 3 Columns

If you wish a three column footer area, just punch this code into your custom-functions.php file from Custom File Editor or via FTP:

//-------3 Columns Custom Footer Widgets------------
if (function_exists('register_sidebar')) {
	$sidebars = array(1, 2, 3);
	foreach($sidebars as $number) {
		register_sidebar(array(
			'name' => 'Footer ' . $number,
			'id' => 'footer-' . $number,
			'before_widget' => '',
			'after_widget' => '',
			'before_title' => '<h3>',
			'after_title' => '</h3>'
		));
	}
}
function widgetized_footer() {
?>
	<div id="footer_setup">

		<div class="footer_items">
  	  		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 1') ) : ?>
    		<?php endif; ?>
		</div>

		<div class="footer_items">
    		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 2') ) : ?>
    		<?php endif; ?>
		</div>

		<div class="footer_items">
    		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 3') ) : ?>
    		<?php endif; ?>
		</div>

	</div>
<?php
}
add_action('thesis_hook_footer','widgetized_footer');

Add 4 Columns Widgetized Footer to Thesis

This is the option I choose for my site as it’s wide enough to hold 4 columns:

//-------4 Columns Custom Footer Widgets--------
if (function_exists('register_sidebar')) {
	$sidebars = array(1, 2, 3, 4);
	foreach($sidebars as $number) {
		register_sidebar(array(
			'name' => 'Footer ' . $number,
			'id' => 'footer-' . $number,
			'before_widget' => '',
			'after_widget' => '',
			'before_title' => '<h3>',
			'after_title' => '</h3>'
		));
	}
}
function widgetized_footer() {
?>
	<div id="footer_setup">

		<div class="footer_items">
  	  		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 1') ) : ?>
    		<?php endif; ?>
		</div>

		<div class="footer_items">
    		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 2') ) : ?>
    		<?php endif; ?>
		</div>

		<div class="footer_items">
    		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 3') ) : ?>
    		<?php endif; ?>
		</div>

		<div class="footer_items">
    		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 4') ) : ?>
    		<?php endif; ?>
		</div>

	</div>
<?php
}
add_action('thesis_hook_footer','widgetized_footer');

Style your Widget Footer Area

To style the footer widget area I punch the following code into my custom.css from the Custom File Editor:

/* ---- footer widget area------*/
#footer_setup {
	background: #222;
	padding: 15px;
	margin-bottom: 25px;
	overflow: hidden;
}
#footer_setup .footer_items {
	text-align: left;
	font-size:1.2em;
	width: 225px;
	padding-right: 15px;
	color: #fff;
	display: inline-block;
	float: left;
	height: 100%;
}
#footer_setup .footer_items h3 {
	font-size: 2em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0px;
	color: #ffffff;
	padding-bottom: 5px;
	border-bottom: 10px solid #C00C00;
	margin-bottom: 5px;
}
#footer_setup .footer_items ul li { list-style: none; }
#footer_setup .footer_items ul { margin: 0px; padding: 0px; }

Populate your brand new widgets from the Widget panel under Appearance to test the function:

Here is the immediate first draft:

Up to you now to adapt the style to your taste.

Related posts:

1. Thesis Tutorial Author Box
2. Create a Header Widget in Thesis
3. Thesis Tutorial Feature Box
4. Create a Widget below the Multimedia Box in Thesis
5. Thesis Tutorial Header Banner Rotator

Tags: Add, Author, Blog, Footer, Garden Route, Hosting South Africa, Marketing, Media, Online Marketing, Publishing, Semiomantics, Theme, Thesis, to, Tutorial, Web Design, Web Services, Widgets, WordPress, Yorgo Nestoridis

This entry was posted on October 29, 2010 at 1:43 pm and is filed under Yorgo Nestoridis. You can follow any responses to this entry through the RSS 2.0 feed.