Web Design Reference Guide

Customizing WordPress 2.5.1: 404 Pages

Last updated Aug 22, 2008.

'Error 404 - Not Found': what a way to greet your friends! If visitors try to view a page or post that isn't where they looked for it, they may come up against that 404 brick wall. It's so unfriendly and unforgiving.

How about offering them a friendlier message, one that explains that there's been a problem and offers some handy advice on what to do next? This article, based on WordPress 2.5.1, shows you how to create a doorway and path for your befuddled visitors.

How to Deliberately Reach a 404 Page

The 404 error code means there is no post or page at a given address, so to deliberately call up the error message try entering an incorrect URL on your blog. I have no posts or pages with the address fred, so that's what I use: http://miraz.info/fred.

I tried the address, http://miraz.info/fred, but there's nothing there, so I see the Error 404 - Not Found message instead.

Edit the 404 Page

The WordPress default theme contains a file called 404.php. That's the one to edit. Here's what it contains:

<?php get_header(); ?> 
<div id="content" class="narrowcolumn"> 
<h2 class="center">Error 404 - Not Found</h2> 
</div> 
<?php get_sidebar(); ?> 

<?php get_footer(); ?> 

It's a standard WordPress file, which means that it calls in the header, sets up the layout for the content, holds some text, and then calls up the sidebar and footer. It's the actual text between the h2 tags that is the problem.

The least you could do would be to write something friendlier, perhaps replace “Error 404 - Not Found” with "Sorry, but there's been a problem. Please click on the blog header to go to the Home Page."

It's still not all that helpful, but at least it doesn't sound so scary.

Add Links to Features

It would be even more helpful to add some links, perhaps to the Home Page, a list of categories or tags, the Archives, or any special Pages that might be important on your blog.

And, at the same time, you can structure the text better by using a short heading and then either paragraphs or a list.

List Categories

Add a list of links to the Categories you use on your blog by including this code:

<h3>Categories </h3> 
<ul><?php wp_list_categories('show_count=1&title_li='); ?></ul> 

The parameters for “wp_list_categories” control the display, while “show_count=1” displays a count of how many posts are in each category. The “&” symbol joins the parameters together. Using “title_li=” removes some extra list tags and the word “categories”, and allows us to use the word “categories” (or anything else) in a heading.

Add a Tag Cloud

A tag cloud automatically sizes tags by how often they've been used in your blog. Frequently used tags appear in a larger font. Add a 'cloud' of the tags you use in your blog with these lines:

<h3>Tags </h3> 
<p><?php wp_tag_cloud(''); ?> </p> 

The “p” tags wrap the “cloud” of links in a paragraph and ensure you're using valid code.

Add a List of Recent Posts

Help visitors find your five most recent posts with this code:

<h3>Recent Posts </h3> 
<ol> 
<?php $postslist = get_posts('numberposts=5'); 
foreach ($postslist as $post) : 
 setup_postdata($post); ?> 
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </li> 

<?php endforeach; ?> 
</ol> 
</div> 

This wraps a list of recent posts in tags for an ordered list.

It instructs the page to retrieve the five most recent posts (numberposts=5), and then sets up a loop. Each post is preceeded by a list tag, then there's a link to the post, using the title of the post as the link text. The link and list tags are closed, and the loop ends.

Now, when visitors strike the dreaded 404, they find a friendly note along with choices about where to go next to read your valuable content. Friendly text and useful links in the 404.php file give your confused visitors a much more pleasant experience when visiting your site. They will stay, rather than go, and they may even come back again.