Home > Articles > Design > Voices That Matter

Web Design Reference Guide

< Back Page 94 of 339 Next >

Customizing WordPress: Make a Lasting Impression

Last updated Oct 17, 2003.

The footer may be the last thing visitors see on your blog. It leaves a lasting impression, so you should use it well. In most themes, a separate file called footer.php contains this part of the site. In this article, you’ll learn how easy it is to edit the footer to display exactly the information you’d like your blog’s visitors to see.

What’s in the Default Footer?

This article is based on the default Kubrick theme in WordPress version 2.3.2. Get started on improving your footer by opening the file yourblog/wp-content/themes/default/footer.php in your text editor.

This footer file is included in each of your blog’s web pages. By default, it displays only two lines of text with some links, as shown in Figure 1. But it has the potential to do a lot more.

Figure 1 The default Kubrick footer, with no modifications, at my Always the Future training blog.

There are four important PHP commands in the footer (see Figure 2):

The name of the blog, as defined in the blog’s Dashboard:
```
<?php bloginfo(’name’); ?>
```
The address of the default RSS feed for posts:
```
<?php bloginfo(’rss2_url’); ?>
```
The address of the default RSS feed for comments:
```
<?php bloginfo(’comments_rss2_url’); ?>
```
A hook into the inner workings of WordPress:
```
<?php wp_footer(); ?>
```

Figure 2 Some of the coding in footer.php from the default Kubrick theme, with no modifications. It includes HTML, PHP, and some comments that don’t display on the blog page.

In addition, there are several commented-out items that you can safely remove.

You might be puzzled by the two instances of </div>. One closes the opening footer div:

<div id="footer">

The other was opened way back in header.php:

<div id="page">

Strip Down and Tone Up the Default Footer

Here’s a stripped-down and edited version of footer.php, with some comments removed and a couple of comments added to remind us about those closing </div> instances. Now it’s easier to see that the core of the footer is a single paragraph:

<hr />
<div id="footer">
<p><?php bloginfo(’name’); ?> is proudly powered by <a href="http://wordpress.org/">WordPress</a> <br /><a href="<?php bloginfo(’rss2_url’); ?>">Entries (RSS)</a> and <a href="<?php bloginfo(’comments_rss2_url’); ?>">Comments (RSS)</a>.</p>

</div><!-- close footer -->
</div><!-- close page -->
<?php wp_footer(); ?>
</body>
</html>

Many bloggers these days like to move the RSS feed links to the sidebar or another part of the blog. You may also want to add your blog’s description after its name, and perhaps add your name (if you’re the only author), like this:

<p><?php bloginfo(’name’); ?>: <?php bloginfo(’description’); ?> is written by Your Name, and proudly powered by <a href="http://wordpress.org/">WordPress</a>.</p>

Add the Contents of a Separate File

Some coding is appropriate to keep in a separate file; for example, the code for a Creative Commons license. As a separate file, this information is easy to edit and update. To try this with your footer, create a file called cc-license.php in the same folder as footer.php. Then use this code to bring the license info into footer.php:

<?php include(TEMPLATEPATH . ’/cc-license.php’); ?>

Here’s what the code means:

Find out which folder contains the active style.css file and use that path as the first part of the address for the file called cc-license.php:
```
include (TEMPLATEPATH
```
The "space dot space" tells WordPress to combine that address with what comes next:
```
 . 
```
Add the filename contained inside the single quotation marks (’’):
```
’/cc-license.php’
```

When the browser displays the page, the contents of the specified cc-license.php file are used in the appropriate place.

Here’s the whole paragraph now:

<p><?php include(TEMPLATEPATH . ’/cc-license.php’); ?> <br /> <?php bloginfo(’name’); ?>: <?php bloginfo(’description’); ?> is written by Your Name, and proudly powered by <a href="http://wordpress.org/">WordPress</a>.</p>

My new footer is a bit of a mess, as shown in Figure 3. I’ll need to edit the styles in style.css to tidy things up.