- Faruk Ateş
- Andy Clarke
- Kris Hadlock
- Robert Hoekman, Jr.
- Molly Holzschlag
- Sarah Horton
- Customizing WordPress: Make a Start
- Customizing WordPress: Using Plugins
- Customizing WordPress: Using Widgets
- Customizing WordPress: Pages and Posts
- Customizing WordPress: Integrating Other Apps
- Customizing WordPress: Edit Theme Style Sheets
- Customizing WordPress: Display a Better Title
- Customizing WordPress: Make a Lasting Impression
- Customizing WordPress: Dividing Long Posts
- Customizing WordPress: Starting Points and Tips for WordPress 2.5
- Customizing WordPress 2.5.1: Make the Most of Pages
- Customizing WordPress 2.5.1: Using the Links and Archives Pages
- Customizing WordPress 2.5.1: 404 Pages
- Customizing WordPress 2.5.1: Search
- Jonathan and Lisa Price
- Catherine Seda
- Dave Shea
- Dave Taylor
Table of Contents
- Web Basics
- Publishing on the Web: Putting Files on the Server
- Web Design Process and Workflow
- Project Management
- Mark My WWWord: HTML and XHTML
- Standards Compliance
- Meta Tags and Search
- Enhancing Web Page Interaction
- Web Graphics
- Web Page Optimization
- Overview of Servers
- Server Programming Basics
- Careers in Web Design
- Intellectual Property for Web Designers
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:
The other was opened way back in header.php:
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
- The "space dot space" tells WordPress to combine that address
with what comes next:
- Add the filename contained inside the single quotation marks
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.
Figure 3 The modified footer is tangled and much too large.
The default Kubrick theme has definitions for the footer styles in three places:
- #footer at line 7
- #footer at line 288
- #footer p at line 295
Tinker with your text and formatting as needed to get a more readable and attractive result (see Figure 4).
Figure 4 After tweaking both the footer text and style.css, things look somewhat better.