Adding A Widgeted Footer To Your Theme

If you follow this blog you know that I am a big fan of Studio Press. So for this week’s post I thought I would give you the instructions on how to add one of those way cool footer widgets to the bottom of your theme. It has four columns. Unfortunately I don’t have a header to match the footer just yet, but I’m working on it. For those who like to build their own themes, these instructions in three steps will at least provide you with a starting place. This is a kinda long post so bear with !

When you’re done your footer should have the following appearance at the bottom of your blog.

Have at it Kids and Good Luck !

Step #1

The first thing to do is to register the widgeted footer areas in your theme’s functions.php file. Using the Lifestlye theme as an example, here’s what the code looks like right now:

And here’s what it will need to look like to register the additional areas:

if ( function_exists(‘register_sidebars’) )
register_sidebar(array(‘name’=>’Sidebar Top’,'before_title’=>’<h4>’,'after_title’=>’</h4>’));
register_sidebar(array(‘name’=>’Sidebar Bottom Left’,'before_title’=>’<h4>’,'after_title’=>’</h4>’));
register_sidebar(array(‘name’=>’Sidebar Bottom Right’,'before_title’=>’<h4>’,'after_title’=>’</h4>’));
register_sidebar(array(‘name’=>’468×60 Header Banner’,'before_title’=>’<h4>’,'after_title’=>’</h4>’));
register_sidebar(array(‘name’=>’Footer #1′,’before_title’=>’<h4>’,'after_title’=>’</h4>’));
register_sidebar(array(‘name’=>’Footer #2′,’before_title’=>’<h4>’,'after_title’=>’</h4>’));
register_sidebar(array(‘name’=>’Footer #3′,’before_title’=>’<h4>’,'after_title’=>’</h4>’));
register_sidebar(array(‘name’=>’Footer #4′,’before_title’=>’<h4>’,'after_title’=>’</h4>’));

Step #2

The second thing you’ll want to do is establish the proper style for the widgeted footer area. Because most StudioPress theme’s footer areas are defined as “footer”, I’m going to define the main “div” for the widgeted footer area “footer-widgeted”. You’ll need to add all of the CSS shown below to style.css, but I’ll break them out so you can see what each section is. Make sure if you’re theme’s width is less than 960px, you’ll need to adjust that below.

Main Container Styling

#footer-widgeted {
width: 960px;
margin: 0px auto 0px;
padding: 0px;
}

Paragraph Stlying

#footer-widgeted p {
color: #333333;
font-weight: normal;
margin: 0px;
padding: 0px 0px 10px 0px;
}

Hyperlink Styling

#footer-widgeted a, #footer-widgeted a:visited {
color: #333333;
text-decoration: none;
}
#footer-widgeted a:hover {
color: #333333;
text-decoration: underline;
}

Unordered List Styling

#footer-widgeted ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#footer-widgeted ul li {
list-style-type: none;
margin: 0px 0px 10px 0px;
padding: 5px;
}
#footer-widgeted ul ul {
list-style-type: none;
margin: 5px 0px 0px 20px;
padding: 0px;
}
#footer-widgeted ul li li {
list-style-type: square;
margin: 0px;
padding: 0px;
}
#footer-widgeted ul li ul li {
margin: 0px;
padding: 0px 0px 3px 0px;
}

Widget Headline Styling

#footer-widgeted h4 {
color: #333333;
font-size: 16px;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
margin: 0px 0px 5px 0px;
padding: 0px;
}

Widget Styling

#footer-widgeted .widget {
background: none;
margin: 0px;
padding: 5px 0px 0px 0px;
border: none;
}

Widget Columns Styling

.footer-widgeted-1 {
width: 215px;
float: left;
margin: 0px;
padding: 20px 20px 5px 10px;
}
.footer-widgeted-2 {
width: 215px;
float: left;
margin: 0px;
padding: 20px 20px 5px 10px;
}
.footer-widgeted-3 {
width: 215px;
float: left;
margin: 0px;
padding: 20px 20px 5px 10px;
}
.footer-widgeted-4 {
width: 215px;
float: right;
margin: 0px;
padding: 20px 0px 5px 0px;
}

Step #3

Last, you’ll need to add the proper code to your footer.php file. Most StudioPress themes are coded similarly, so this should work. Inside your theme’s footer.php file, look for this code:

Essentially, you’ll be placing the code below in between the two lines you see above. As a result, you’re code should look like this: