Simple Footers for WordPress Themes

I use WordPress as a CMS for many websites and I’m a big fan of reusing code where it makes sense. So, I’ve pieced together some simple markup and styles, which are a basis for the footer in some of my WordPress themes.

By ‘footer,’ I don’t mean the footer.php file that is often found in WordPress themes, but rather just to the line or two at the bottom of sites that displays site information:

Footer Markup

Here’s the basic markup for the footer pictured above:


<ul id="site_info" class="footerfirst">
<li class="no_disc">&amp;copy;
<?php
ini_set('date.timezone', 'America/Los_Angeles');
$start_year = 2002;
$this_year = date('Y');
if ($start_year == $this_year) {
echo $start_year;
}
else {
echo "{$start_year}-{$this_year}";
}
?>
<?php bloginfo('name'); ?></li>
<li><a href="<?php echo get_permalink(18); ?>">Privacy Policy</a></li>
<li><?php smho_loginout(); ?></li>
<?php smho_register('<li>','</li>'); ?>
<li class="no_disc credits"><a href="http://www.ivycat.com">website by ivycat</a></li>
</ul>

Let’s dissect this baby and see what each bit does.

Make a List

First, the entire markup is an unordered list with an ID of site_info. Why? Well, it’s a list of links and I usually prefer to make navigation from lists. Just makes semantic sense to me.

I call this div site_info because that’s really what it is and it’s possible that it may not be located in the footer in future redesigns, so I’m going with a safe, descriptive identifier.

Also, since lists are block-level elements, they can be manipulated in CSS just like divs, paragraphs, headers, or any other block element.

This example list contains four list items:

1. Copyright Information
2. Privacy Policy Link
3. Login & Site Admin Links
4. Credits

Copyright Information

The copyright date is self-updating, so you never have to update it again.

<li class="no_disc">&amp;copy;
<?php
ini_set('date.timezone', 'America/Los_Angeles');
$start_year = 2008;
$this_year = date('Y');
if ($start_year == $this_year) {
echo $start_year;
}
else {
echo "{$start_year}-{$this_year}";
}
?>
<?php bloginfo('name'); ?></li>

This block of code establishes the start year and the current year (based on server time) and checks to see if they are the same. If so, it shows the current year, otherwise it displays the start year and end year, separated by a dash, followed by the blog name.

I learned this technique from PHP Solutions, by David Powers, which I highly recommend if you’re a designer trying to learn a bit more PHP.

I’ve added a class=”no_disc” to this list item so we can remove the bullet using CSS.

Privacy Policy Link

The next list item is a link to the site’s privacy policy:

<li><a href=”<?php echo get_permalink(18); ?>”>Privacy Policy</a></li>

Pretty easy to see what’s going on here. We’re using the get_permalink template tag to find the permalink of the Privacy Policy page by ID number.

There are several other ways you can link to pages, but I find this suits this situation well. Of course, you can add links to whatever you like.

Login & Site Admin Links

The next two entries provide site administration links.

<li><?php smho_loginout(); ?></li>
<?php smho_register(’<li>’,'</li>’); ?>

The first line displays uses the smho_loginout template tag to display login link. When a user is logged in, this link changes to a logout link.

The second line uses the smho_register template tag to display a ‘Site Admin’ link when a user is logged in. If you’ve configured your site to allow users to register themselves, it will display as a ‘Register’ link if users aren’t logged in.

Credits

The final list item displays site credits. Giving it two classes allows us to take the bullet away from the list item and float it to the right.

<li class=”no_disc credits”><a href=”http://www.ivycat.com”>website by ivycat</a></li>

Footer Styles

Styling our list is pretty easy and involves a few simple floats.

#site_info {
float:left;
clear: both;
width:100%;
background: #666;
color: #FFF;
}
#site_info li {
float: left;
list-style-type: disc;
margin: 0 0.5em 0 1em;
}
#site_info li.credits {
float: right;
margin-right: 1em;
}
#site_info a {
color: #FFF;
font-size: .9em;
text-decoration: none;
}
#site_info a:hover {
color: #ccc;
text-decoration: underline;
}
#site_info li.no_disc {
list-style-type: none;
}


These styles are pretty self-explanatory, but here are the major parts:

1. We’re floating the entire list to the left, making sure it clears any elements above it, and setting background and font colors
2. Then, we’re floating our list items to the left, with the exception of the one with the class of “credits,” which floats right.
3. Finally, we throw in a bit of margin, and some link styles and we’re done.

Of course, this is a framework and you’ll likely have to tweak the styles a bit to fit it in your theme, but that’s the fun part, right?

You can see an example of this footer used on sewmyheadon.com.