The inspiration for this tutorial comes from a tweet I received with feedback for the soon-to-be-released RS12 theme.

zakmorris twitter response

Although the widgetized footer did not ultimately make it in the release of the RS12 theme, I decided to write this tutorial to show people how exactly to add a widgetized footer in your theme. In this guide, you’ll learn:

  • The HTML and CSS code needed to produce the widgetized footer
  • How to add commonly used WordPress template tags as placeholders
  • How to widgetize the footer and place widgets inside it

There’s going to be a lot of code in this post, so if you’re up for it, read on…

I’ll be using the Green Rays WordPress theme as my example in this tutorial. At the moment, the footer just has a standard “copyright” message and credits.

The HTML

The first step is to add the HTML markup. Let’s say we’re going to have three different sections in the widgetized footer with lists of Most Recent Posts, Monthly Archives, and Daily Archives. We’ll place this HTML code above the current “copyright” line.

<div class="footer-item">
<h3>Recent Posts</h3>
<ul>
<li><a href='#' title='Featured post'>Featured post</a></li>
<li><a href='#' title='Blockquotes'>Blockquotes</a></li>
<li><a href='#' title='How the ‘more’ tag works'>How the ‘more’ tag works</a></li>
<li><a href='#' title='Order or Unorder'>Order or Unorder</a></li>
</ul>
</div>
<div class="footer-item">
<h3>Monthy Archives</h3>
<ul>
<li><a href='#' title='March 2008'>March 2008</a></li>
<li><a href='#' title='February 2008'>February 2008</a></li>
<li><a href='#' title='January 2008'>January 2008</a></li>
<li><a href='#' title='December 2007'>December 2007</a></li>
</ul>
</div>
<div class="footer-item">
<h3>Daily Archives</h3>
<ul>
<li><a href='#' title='March 7, 2008'>March 7, 2008</a></li>
<li><a href='#' title='February 9, 2008'>February 9, 2008</a></li>
<li><a href='#' title='January 4, 2008'>January 4, 2008</a></li>
<li><a href='#' title='December 22, 2007'>December 22, 2007</a></li>
</ul>
</div>
<div class="clear"></div>

Basically this code puts each “widget” in a div. Inside each widget is a heading and an unordered list with links. Yes, I know the links don’t go anywhere. We’ll later replace this with WordPress template tags. Here’s what we have so far:

Green Rays Footer 1

The CSS

As you can see, this isn’t looking so good without any CSS styling. Add the following code to your stylesheet.

.footer-item {
float: left;
width: 33%;
padding-bottom: 10px;
}
.footer-item ul {
padding-left: 15px;
}

What this code does is float each footer item to the left, which basically means they can be side by side. The width is set to 33%, which gives enough room for three footer items in a single row. There is also a little bit of padding added below each footer item. The second piece is just padding the lists 15 pixels to the left.

Now you can see the HTML and CSS are starting to come together. Here’s what you should have so far:

Green Rays Footer 2

WordPress Code

At the moment, we have a bunch of empty HTML links, with no actual WordPress code. Let’s replace the lists under Recent Posts, Monthly Archives, and Daily Archives with the WordPress template tag equivalents. Replace what you currently have with the following:

<div class="footer-item">
<h3>Recent Posts</h3>
<ul>
<?php wp_get_archives('type=postbypost&limit=4'); ?>
</ul>
</div>
<div class="footer-item">
<h3>Monthy Archives</h3>
<ul>
<?php wp_get_archives('limit=4'); ?>
</ul>
</div>
<div class="footer-item">
<h3>Daily Archives</h3>
<ul>
<?php wp_get_archives('type=daily&limit=4'); ?>
</ul>
</div>

The parameters should be pretty self-explanatory, but if you’re not sure about any of them, try looking up wp_get_archives in the WordPress Template Tag Lookup Tool. Remember, I’m just using the wp_get_archives() template tags as a placeholder. We’ll be switching these out with other WordPress widgets later, after we widgetize the footer.

Widgetize It

For this section of the tutorial, I’ll be borrowing parts from my previous widgetizing themes tutorial.

The first step is to register the “sidebars.” To do this, simply replace the current contents of the functions.php file with the following:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Sidebar',
'before_widget' => '<div class="sidebaritem">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer',
'before_widget' => '<div class="footer-item">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
?>

Now we’ll go into sidebar.php and replace the current dynamic sidebar conditional tag with this:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

With this:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Sidebar") ) : ?>

Now we’ll go into our footer.php file and wrap the footer items in it’s own respective sidebar conditional tag. Right before the first “sidebar-item” div, add the following.

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Footer") ) : ?>

Right after the final closing “footer-item” div (and above the “clear” div which we added earlier) we’ll add the following:

<?php endif; ?>

Okay, now our sidebar and footer should be widgetized. Let’s test it out by adding a few widgets in the footer. I’ll add a Blogroll widget, Recent Comments widget, and a text widget. Here’s what it should look like:

Green Rays Footer 3

Conclusion

Well, that’s the basics of adding a widgetized footer to your theme. You may want to add separate styling rules for other types of widgets such as the calendar or search box. This probably won’t work with every theme, such as the RS12 theme for example, as it had a non-expandable footer.

If anyone wants the updated Green Rays theme by any chance, you can download it here. This way you can see where exactly I added the code. You can compare it with the original theme as well.

Hope you liked the tutorial. Will you be adding a widgetized footer to your theme? Is there anything in the code I used above you would do differently? Questions, comments, suggestions, and criticisms are all welcome, so feel free to sound off in the comments.