Tag Archives: 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!

Content is King Despite Outrageous Storms

I‘ve accomplished quite a bit since yesterday, despite a violent storms outside and frequent power blips (thank goodness for the UPS!). Although I “knew” it, it’s still surprising how much work there is to do getting the site set up — much more than just making the theme look and work ok. As they say, content is king, and I’ve been busy preparing the beginning content so that people will have a reason to visit TTT.

Here’s what I’ve done so far since yesterday:

  • Fixed wp-config so WordPress saves no drafts. A “feature” that bloats the database.
  • Removed the line separating content and sidebar. Godhammer calls it a “laugh-line.”
  • Brought into DEVONthink all the wandering snippets of code and DIYthemes forums snippets on my hard disk. Got everything set up to write the pages and posts for TTT, as well as organizing future materials.
  • Started a color table in custom.css for all the colors I’ve used, plus my color scheme.
  • Worked on the footer to get the fonts larger in the copyright and attribution lines. Changed footer widget body plain text font colors to the same as what Thesis uses for links. Found that I can’t change footer widget body font sizes without messing their alignment up. Oh well.
  • Restored the Anxiety, Panic & Health widget I lost in The Move.
  • Started writing content, such as the landing page, the About page, and all the policy pages. Set them all up in contextual menus.
  • Built a yellow box for post announcements based on the color scheme.
  • Did some research on what it would take to do video tutorials. I already have the software. I just need a good microphone.

My basic goal for today’s work is to add to TTT’s starting content. I want to have the site up and running as soon as practical, and I need starting content to do that. I can add bells and whistles later.

Here’s my to-do list for today:

  • Continue more detailed planning of the menu tree.
  • Continue writing content, focusing on material I already have.
  • Replicate the tutorial on Contextual Submenus I lost in The Move.
  • Finish writing the tutorial on Button Bar Menu/Submenu. Still not satisfied with the name.

And as I have time and opportunity (and need a break):

  • Continue thinking and research what it would take to do video tutorials. Find out about post-processing.
  • Contact HostGator about some necessary server setting changes for enabling teaser images.
  • Find a way to display tags on the blog front page and on pages.
  • Bring into DEVONthink Thesis-related bookmarks from Safari.
  • Set up Google Custom Search for Thesis Theme Tools.
  • Decide where I want the search bar. I was thinking in the header, but it’s already pretty crowded. May just put it in the sidebar for right now. I do want to have a cute little spyglass, though.

That’s all folks! See you tomorrow!
©2009 Thesis Theme Tools. All rights reserved.

Fourth of July, El Stupido, and Wandering Snippets

Happy Fourth of July!
Happy Fourth of July!

Happy Fourth of July! Most people take the day off and do the barbecue thing. I will do hot dogs at my best buddy’s house, but otherwise I’ll be plugging away here at the Nichols Nuthouse. My wife is in England and my daughter is doing her own thing, so I have the space to do what I want, which is plug away.

DEVONthink Pro – try it!

I set up a database in DEVONthink Pro for Thesis Theme Tools. Here I will keep my daily posts, along with all the code snippets and articles I clip. Not only a central repository, but searchable. It’s where I’ll write my posts, too. I’ve used DTP from the beginning for my other blog, Anxiety Panic & Health, and I don’t know why I didn’t think of it for this blog — I wouldn’t have lost those posts if I had. Oh well.

Yesterday I do what I intended — life intervened — but I did get a few things done:

  • Got a FeedBurner account.
  • Set up an image-based subscribe by RSS and email, and Twitter images in a widget. I already had the images from before The Big Stupido, so it didn’t take long — ripped the code off from the Mom Talk Blog with 3 Kids and Us rather than exercise my rusty HTML table skills.
  • Refined the look by making the contextual menu and background behind the button bar black and cm text white. Not so garish. May make the border a different color, too.

Today I plan to (most of which are brought over from yesterday):

  • Bring all the wandering snippets of code into DTP — this may take a while, but necessary.
  • Start a color table in custom.css for all the colors I’ve used so far.
  • Set up Google Custom Search for Thesis Theme Tools.
  • Decide where I want the search bar. I was thinking in the header, but it’s already pretty crowded. May just put it in the sidebar for right now. I do want to have a cute little spyglass, though.
  • Work on the footer widgets more to get the fonts larger in the heading and body.
  • Restore the Anxiety, Panic & Health widget I lost in The Move.

And if I have time:

  • Do more detailed planning of the menu tree. I’ve decided not to make dummy pages for all my planned documents, because users would get irritated if they clicked on something and it was just a placeholder.
  • Replicate the tutorial on Contextual Submenus I lost in the move.
  • Finish writing the tutorial on Image-Based Menus/Submenus. Try to think up a better name for it. Button Bar Menu/Submenu?
  • Start writing content, such as the landing page and some content pages. I can take some of the latter from the DIY Snippets document where I keep some of the more common and/or long-winded replies on the DIYthemes Forum.
  • Think and research what it would take to do video tutorials.
  • Decide whether I want pictures on the blog and teasers. If I do, I need to contact HostGator about some necessary server setting changes for the teasers.

That’s it. See you tomorrow!

The Inevitable First Post

This is the fourth day I’ve had this blog, Thesis Theme Tools, but that is a lie. Actually, it’s the first day, and I had another one called Thesis Tools built off a subdomain of my main blog Anxiety, Panic & Health, for three days.

A dumb mistake

Let me explain: Just today I got the domain name for this blog and set it up. Stupid me erased the subdomain before I got everything moved over, though I did have copies of my custom.css, custom_functions.php, images, and an article I had written.. I lost all my Thesis settings, the first 3 days’ posts, and a couple of widgets, but I think I got off pretty clean for such a dumb move.

Anyway, in these 4 days you can see that I’ve got the basic setup done, my button images and header made, the fat footer in, and a few widgets. I decided not to try to replicate the posts, because you don’t want to read them, and I’ve got better things to do.

Fortunately, I have the whole day (mostly) to tinker with TTT. So far I’ve:
  • Set up the new domain, email, and installed WordPress 2.8 and Thesis 1.5.1.
  • Copied over the custom files, and found and copied the images I had made. Also did a search-and-replace on the domain name in my custom_functions.php file (145 of them!) so things wouldn’t break.
  • Made a new header image for TTT. It was the same size, so all I had to do is change the file name and it just worked — menu adjustments and all.
  • Made new dummy pages so my button bars will work.
  • Brought in some plugins and set them up.
Pretty good for 3 hours’ sleep, huh? So what’s to do after I take a nap? Here’s my list:
  • Finish this post and get it up.
  • Set up a FeedBurner account for Thesis Theme Tools.
  • Set up Google Custom Search for Thesis Theme Tools.
  • Decide where I want the search bar. I was thinking in the header, but it’s already pretty crowded. May just put it in the sidebar for right now. I do want to have a cute little spyglass, though.
  • Work on the footer widgets more to get the fonts larger in the heading and body.
  • Do my image-based RSS, email and Twitter for the sidebar that I lost. Fortunately, I’ve still got the images!
  • Do more detailed planning of the menu tree. I’ve decided not to make dummy pages for all my planned documents, because users would get irritated if they clicked on something and it was just a placeholder.
  • Replicate the tutorial on Contextual Submenus I lost in the move.
  • Finish writing the tutorial on Image-Based Menus/Submenus. Try to think up a better name for it. Button Bar Menu/Submenu?
  • Start writing content, such as the landing page and some content pages. I can take some of the latter from the DIY Snippets document where I keep some of the more common and/or long-winded replies on the DIYthemes Forum.
  • Think and research what it would take to do video tutorials.
  • Decide whether I want pictures on the blog and teasers. If I do, I need to contact HostGator about some necessary server setting changes for the teasers.

Is the design too garish and busy?

I’m concerned about the header. The design looked good as “Thesis Tools” but a bit crowded and busy using the same basic design for the current one. And I’m beginning to think that the whole color scheme looks a bit garish, what will all the different button colors. I actually do have a color scheme, and tried to get as close as I could to it with the button colors, but it’s hard when you have 8 of them. I’m still tinkering, so you may come back one day and it will be all different.

That’s enough for any day, especially since I need to spend some time on Anxiety, Panic & Health as well as visit the DIYthemes Forums a few times.
See you tomorrow!