- Featured Columnists
- Faruk Ateş
- Andy Clarke
- Kris Hadlock
- Robert Hoekman, Jr.
- Molly Holzschlag
- Sarah Horton
- Miraz Jordan
- 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 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.
Figure 2 I've changed the text on the 404.php page to be slightly friendlier.
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.
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.
Figure 3 I've added “Categories”, “Tags”, and “Recent Posts” to my 404 page.
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.