Tag Archives: Fat Footer

You Too Can Have a Fat Footer!

Widgetized “fat” footers are a popular addition to blog sites. There have been several threads on the DIYthemes Forums about widgetized footers, but often they are complicated and hard to follow.

A new article, Tutorial: Widgetized “Fat” Footer, offers 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.

The article shows you how to create a 3- or 4-widget footer like the ones at the bottom of this page and on the Thesis Theme Tools demo site.

The widgetized footer described in the 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.

Included is a link to a zip file that contains all the required code to put into your custom_functions.php and custom.css files.

So try it out! You too can have a “fat” footer — in less than 10 minutes!

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 1: 3-column widgetized "fat" footer

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

Figure 2: 4-column widgetized "fat" footer

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.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!