How to create a multi-column, widgitized footer for Wordpress

Multi-column footers are a big trend in web design these days. It's a great way to provide more information and links to visitors without cluttering up the top part of your layout. On content pages, this information appears just when the user has finished reading your article, leading them to find more great content on your site and other ways to interact. This article will show you how to make a 3- 4- or more-column, widgitized footer in Wordpress.

Scroll to the bottom of this article or visit my homepage to see the final result.

How it works

To create the footer, we will build a new dynamic sidebar. This will allow us to add widgets to the footer through the Wordpress admin panel. Next, we will add some CSS to create a 3-column layout for the footer. This tutorial will demonstrate a 3-column layout. However, you can use the same technique for 2, 4 or more columns.

For this tutorial we will be using the default Kubrick theme in Wordpress 2.8. Some of the details of this implementation may vary slightly depending on how your theme is set up and where you want the footer to appear. You may need to move some </div>'s around to get things to lay out the way you want to.

Step 1: Creating a new dynamic sidebar

Testing a theme without affecting your live site

As you work on the changes for this tutorial it would be useful to be able to make changes your theme without showing them on your live site. This is easy to do with a plugin called Theme Test Drive. This will allow you to use a separate theme when you are logged in, while leaving a different theme for your live visitors.

Make a copy of your theme to work on, and use it in Theme Test Drive. When you're done you can switch your live theme to the new version you've created.

First we will create the dynamic sidebar. This is the same technique that is used to create a widgitized sidebar. There are two bits of code we need to add to the theme files: the code to create the dynamic sidebar and the code to place it in the footer.

To create the dynamic sidebar, put the following code into your Theme Functions (functions.php) file. If you already have a dynamic sidebar in your theme, you should see some code that looks similar to this. Paste this section right after the existing register_sidebar block.

register_sidebar(array(
'name' => 'footer',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));

Now the register_sidebar function may look something like this:

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));

register_sidebar(array(
'name' => 'Footer',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));

}

Here we have the default sidebar first, then our new sidebar called "footer". You can choose whichever HTML elements you want to wrap the widget and the widget title. (We could argue about whether lists or divs are more "semantic" here, but that's beyond the scope of this article.)

To place the new sidebar (footer) into your theme, put the following code where you want the footer to appear. If you want it to appear on all pages, put it at the top of the Footer template (footer.php). If you only want it to appear on your home page, put it at the bottom of your Main Index Template.

<div id="chunkyfooter">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer') ) ?>
</div>

 

This code is creating a DIV called chunkyfooter that you can target using CSS. The PHP bit says that if the dynamic sidebar function is available in Wordpress, load the dynamic sidebar called "footer". If you look at your site right now you won't see anything different. This is because you haven't put anything into the footer yet!

Step 2: Adding Widgets

In your wordpress admin panel, under widgets, you will now see a new section in the sidebar called "Footer". Now you can add widgets to that space.

Wordpress widgets sidebar with new footer section

Drag and drop 3 widgets into this section (if you want a 4-column layout, drag 4 etc.). I will use Recent Posts, Recent Comments, and an RSS feed with my delicious links.

Wordpress widget sidebar with widgets added to footer

Now when I load my home page my widgets appear - in a really odd place! Let's fix that next.

New footer showing in a really odd position

Step 3: Positioning the footer with CSS

First we need to get the footer to appear at the bottom where it should be. Create a new section in the styles.css file called Chunky footer (just to keep things organized). First we need to clear the chunkyfooter div so it shows below the content:

/* Chunky Footer */

#chunkyfooter {
clear: both;
}

Note: to work on this section it is very helpful to use the Firebug extension for Firefox. Then you can see what's happening with your CSS and test changes on the fly.

In the default Kubrick theme you'll notice that the content is now overhanging the edge of the page on the left side. This is because of the shadow background used in this theme. We'll have to add some margins to correct that:

/* Chunky Footer */

#chunkyfooter {
clear: both;
margin: 0 10px;
}

Note that the margin is probably not required for other themes - you'll have to experiment with yours to find out.

Footer after step 3

Step 4: Positioning the columns with CSS

Now we need to get those widgets to display as three columns. To do that, we'll need to give them a width and float to the left. Since the page width in the Kubrick theme, minus the 10px margins we added above is 740px, we'll divide by 3 and get 246px;

To use a different number of columns, simply divide the page width the number of columns. The resulting number becomes the width of your columns.

/* Chunky Footer */

#chunkyfooter div {
width: 246px;
float: left;
}

Great! Everything is almost in its place now. To finish up, I'm going to make a few refinements to the display of my widgets, and to the Kubrick theme layout.

Footer after step 4

Step 5: Fixing some problems with the Kubrick theme

Note: Skip this section if you are using a different theme. The important thing here is to get equal-width columns throughout your layout (i.e. ensure that the width of your sidebar matches the width of the column below it in your chunky footer).

The problem we have here is that the existing sidebar on the Kubrick theme is smaller than 1/3 the width of the page. This means that the right column in our three-column footer overlaps the grey sidebar a little bit. Instead of adjusting the footer, I'm going to change the width of the sidebar. As demonstrated in my article on designing with grids, it's good to use equal-width columns.

On line 580 of the styles.css file, I'll change the #sidebar CSS as follows:

#sidebar
{
padding: 20px 0 10px 0;
margin-left: 512px;
width: 236px;
}

Things look a little smooshed in the centre column now, so I'll make a small change there to align the left side of the text with the left side of the blue header. On line 266, I'll change the .narrowcolumn like this:

.narrowcolumn {
float: left;
padding: 0 0 20px 20px;
margin: 0px 0 0;
width: 472px;
}

The only problem left is the width of that grey sidebar. This is an image, so I have to actually open up the image file and change the width of the grey area. Download an updated copy of kubrickbg-ltr.jpg. To fix the problem just copy this into your themes/default/images folder, overwriting the existing version.

Step 6: CSS adjustments for the footer

You'll notice now that the headers on the chunky footer sections are bumping up against the edge of the columns. We'll fix this by adding some padding to those div's. While I'm at it, I'll also change the margins on the lists so things line up a little better, and add a background to the chunkyfooter div:

/* Chunky Footer */

#chunkyfooter {
clear: both;
margin: 0 10px;
background: #eee;
overflow: hidden;
padding-top: 10px;
}

#chunkyfooter div {
width: 226px;
float: left;
padding: 0 10px;
}

#chunkyfooter h2 {
margin-top: 0;
}

#chunkyfooter ul {
padding-left: 14px;
}

All done! An attractive and functional "chunky footer" for your Wordpress site.

Screenshot of the finished footer

Discussion

To discuss, ask questions or comment on this article please see the Webmaster Forums discussion on How to create a multi-column, widgitized footer for Wordpress.

Megan McDermott's picture

About the Author

Megan is co-founder and editor of A Padded Cell and administrator at The Webmaster Forums. She has been designing websites since 1997, with expertise in design, information architecture, usability, HTML/CSS, Drupal theming, and more. She is available for short-term or ongoing freelance work in any of those areas. Read her web design blog at MeganMcDermott.com or check out her portfolio.