Thesis Tutorial: Create “Fat Footer” or Widgetized Footer

In this Thesis Tutorial, I’ve included some basic code for creating and stylizing a “fat” footer or “widgetized” footer in a WordPress website or blog that uses the Thesis Theme. In the WordPress Dashboard > Thesis Design Options > HTML Framework I am using the “Page Framework” option, but this will work with the “Full-width framework” option, as well.  Results for colorizing the Fat Footer background will change slightly depending on which option you choose.  Leave your questions in the comments below if you need my help and I’ll see what I can do for you.

OK, Here’s the code you need to copy and paste into the thesis theme custom.css file.  I got the code from DIYthemes.com the home of Thesis Theme and modified it slightly to give the footer a background color.   If you want to learn more about CSS code, in general, then you can go to W3schools.com for some free tutorials.  If you want some more specific information about customizing widgets using Thesis Theme, you can watch my thesis theme widgets video tutorial or you can buy the Thesis Theme manual I am selling on this site.

Code for custom.css file

/* START of Fat Footer CSS Code */

.custom #footer {background-color: #FFFFD9;}

.custom #footer-widget-block { text-align:left; overflow:hidden; }

.custom .footer-widgets { width:33%; float:left; }

.custom .my-footer-one {}
.custom .my-footer-two {}
.custom .my-footer-three {}

/* END of Fat Footer CSS Code */

Ok, and here’s the PHP code you need to past into the thesis theme custom_functions.php file.  But, first make sure you always backup the custom_functions.php file before ever touching it or it can ruin your whole day!

Always Backup custom_functions.php file!!!

Code for custom_functions.php file

/* START of FAT Footer */

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer Widgets Left',
'before_widget' => '<li class="widget %2$s" id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer Widgets Middle',
'before_widget' => '<li class="widget %2$s" id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer Widgets Right',
'before_widget' => '<li class="widget %2$s" id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));

function my_widgetized_footer() { ?>
<div id="footer-widget-block">
	<div class="my-footer-one footer-widgets sidebar">
		<ul class="sidebar_list">
			<?php thesis_default_widget(3); ?>
		</ul>
	</div>

	<div class="my-footer-two footer-widgets sidebar">
		<ul class="sidebar_list">
			<?php thesis_default_widget(4); ?>
		</ul>
	</div>

	<div class="my-footer-three footer-widgets sidebar">
		<ul class="sidebar_list">
			<?php thesis_default_widget(5); ?>
		</ul>
	</div>
</div>
			<?php
	}
add_action('thesis_hook_footer','my_widgetized_footer','1');

/* End  of FAT Footer PHP Code */

Article Written by Jim Landers aka “Jupiter Jim”