Tutorial: Widgetized “Fat” Footer

There have been numerous threads in the DIYthemes Forums about making a widgetized “fat” footer. Most methods are fairly complicated, and the threads are often confusing.

Here is a solution that is simple to set up, needs no configuration and can be used right out of the box! It has been tested in both Thesis 1.5x and 1.6x.

This tutorial will show you how to put a 3- or 4- column widgetized footer on your site. The 3-column footer illustrated in Figure 1 is from the Thesis Theme Tools demo site:

Figure 2 shows the 4-column footer at the bottom of the Thesis Theme Tools page:

The widgetized footer in this article can contain any kind of widget, video, image, or other information that can be put in the sidebars — they are widgets just like any other widgets. The footer widget items appear in the WordPress widgets panel right along with the sidebars, so they are easy to set up.

There are two groups of code for the widgetized footer. One is put into your custom_functions.php file, and the other into your custom.css file. It does not matter where you put the code in these files.

Rather than copy the code shown below, you can get everything you need in a single zip file. Just download it by clicking here.

The code for custom_functions.php

Below is the code to put into your custom_functions.php file. Actually, there are two sets of code: one for the 3-column widgetized footer, and one for the 4-column footer. Both are included in the zip file. You need copy only the code for the number of columns that you want. Don’t put both into your custom_functions.php file!

3-column code for custom_functions.php

If you download the zip file, this code is in the “widgetized footer 3 col.php” file.

/*---------------------------------*/
/* WIDGETIZED FOOTER - 3 COLUMNS   */
/* Mike Nichols - October 17, 2009 */
/*---------------------------------*/

/*-----------------------------------------*/
/* register sidebars for widgetized footer */
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>'
		));
	}
}

/*-----------------------*/
/* set up footer widgets */
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');

4-column code for custom_functions.php

If you download the zip file, this code is in the “widgetized footer 4 col.php” file.

/*---------------------------------*/
/* WIDGETIZED FOOTER - 4 COLUMNS   */
/* Mike Nichols - October 17, 2009 */
/*---------------------------------*/

/*-----------------------------------------*/
/* register sidebars for widgetized footer */
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>'
		));
	}
}

/*-----------------------*/
/* set up footer widgets */
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');

The code for custom.css

Following is the code for your custom.css file. It is the same for both 3- and 4-column footers. If you download the zip, it is in the “widgetized footer.css” file.

/*---------------------------------*/
/* WIDGETIZED FOOTER               */
/* Mike Nichols - October 17, 2009 */
/*---------------------------------*/

/* footer widget area setup */
#footer_setup {
	/* widgetized footer background (not footer background) */
	background: #EEEEEE;
	/* widget padding */
	padding: 16px;
	/* margin at bottom of widgets */
	margin-bottom: 25px;
	/* do not change this! */
	overflow: hidden;
}

/* widget item setup */
#footer_setup .footer_items {
	/* contents alignment */
	text-align: left;
	/* widget width */
	width: 210px;
	/* space between widgets */
	padding-right: 10px;
	/* text color */
	color: #2361A1;
	/* do not change these! */
	display: inline-block;
	float: left;
	height: 100%;
}

/* widget item headers*/
#footer_setup .footer_items h3 {
	/* font size */
	font-size: 1em;
	/* bold or not */
	font-weight: bold;
	/* uppercase or not */
	text-transform: uppercase;
	/* space out the letters*/
	letter-spacing: 0px;
	/* font color*/
	color: #000000;
	/* padding under header text */
	padding-bottom: 3px;
	/* border under header text */
	border-bottom: 3px solid #ffdf00;
	/* distance between border and widget text */
	margin-bottom: 5px;
}

/* do not change these! */
#footer_setup .footer_items ul li { list-style: none; }
#footer_setup .footer_items ul { margin: 0px; padding: 0px; }

How to use and customize the widgetized footer

The code shown above is ready to run and needs no configuration. However…

Important! Your widgetized footer will not appear until you put at least one widget into it! From your WordPress admin panel go to Appearance > Widgets. Along with the sidebars you will see items for the footer. Just set them up like you would the sidebars. You can put any number of widgets into each footer column, but be aware that this will make your footer very tall.

Customizing the widgetized footer

There are several things that can be customized in the widgetized footer, particularly the headers. You will also want to set width of the widgets. Please note that there are several selectors and properties that you should not change or your footer will look very strange! Following are some of the more common customizations:

1. Background
In Figure 1 the widgetized footer has a white background, and in Figure 2 it has a gray background. You can give it any color background you want, or even display it over an image! The setup for the background is in the first selector, “#footer_setup.” This controls only the background behind the widgets, though. If you want the entire footer section to have a background color, you will need to customize the Thesis “#footer” selector. The code you would use in custom.css looks like this:

.custom #footer {
	height: 400px;
	width: 1018px;
	background: #000000;
}

Change the height and width of the footer area to suit, and of course change the footer color.

2. Width of widgets
The size of the widgets may be too narrow or too wide for your page setup. If too wide, they may even wrap around to a second row. The widget width is set in the “#footer_setup .footer_items” selector. You will have to experiment until you get this right.

3. Color, font and border of the widget headings
These are set in the “#footer_setup .footer_items h3″ selector. The properties are all commented so I will not repeat them here. The most common font customizations are included, but you can add more, such as the font family.

Customizing the widgets in the widgetized footer

The widgets in the widgetized footer are not customized like the ones in the sidebars. Instead, they are governed by the footer’s selectors. The footer’s font color by default is gray and all links are underlined. Following are the footer selectors that apply to the widgetized footer. They are set up with “Thesis blue” links and underlining only when the cursor hovers over a link:

/* footer font styles */
.custom #footer a {
	font-size: .9em;
	border-bottom: none;
	/* default Thesis link color */
	color: #2361A1;
}
.custom #footer a:visited {
	text-decoration: none;
	/* default Thesis link color */
	color: #2361A1;
}
.custom #footer a:link {
	text-decoration: none;
	/* default Thesis link color */
	color: #2361A1;
}
.custom #footer a:hover {
	text-decoration: underline;
	/* default Thesis link color */
	color: #2361A1;
}

Conclusion

Remember you can get the files needed for the widgetized footer in a single zip file. Just download it by clicking here.

I hope this article has been instructive and that you will try out the widgetized “fat” footer on your site! As always, your comments are welcome. If you wish, you can contact me by email by clicking on the “Contact” button in the menu.

©2009 Michael L Nichols. All rights reserved.

Related Articles

• You Too Can Have a Fat Footer! (0)
• Fourth of July, El Stupido, and Wandering Snippets (0)
• Content is King Despite Outrageous Storms (0)
• Tutorial: Vertical Multilevel Dropdown Menu (5)
• Tutorial: Rotating Image Gallery for Pages and Sidebars (13)

Tagged as: Fat Footer, Footer, Widgetized Footer, Widgets