Practical Guide to creating a 404 Error Page for WordPress

I make mistakes. You make mistakes. We all do. And some of these mistakes end up providing our readers with a 404 page. Chances are that page says "Error 404: file not found". How does that help your visitor?

Instead of just identifying the problem, your 404 error page needs to offer a solution.

In the default WordPress Kubrick theme the 404 error page (example) is probably one of the ugliest pages you've ever seen, and chances are yours is not any better. Today is the time to end that. This post will provide you with everything you need to make your "404 - File not found" page a starting point instead of a dead end street.

The goal of a good 404 error page is simple: to make sure visitors landing on it continue browsing your site, and find the content they came for. Let's get going.

Get into your visitors mindset

Get into the mindset of the person that just got to a 404 error page on your site. They were expecting something else, if not, they wouldn't have gone there. So there's a couple of things you should absolutely not do:

First of all, considering they've probably clicked a link somewhere to get to that 404 error page, whose fault is it that they're getting a 404? Theirs? No. Yours? It very well might be, so you'd better apologize.

Second, make sure the styling of your 404 error page fits in with the rest of your site. Sometimes designers go overboard with their 404 pages, and make them look like, for instance, a Windows blue screen. This can have the very undesired effect of people leaving immediately.

Third, if you are going to make jokes, like that Windows blue screen, make sure it's a joke everyone gets. Especially when you're blogging in English, you might end up with a lot of readers for whom English is their second or third language. Your puns, though well intended, might be going nowhere because their mastery of the language isn't sufficient. Because of that they might leave... Is that worth it?

Let's make a killer 404 error page for WordPress

Ok so we know what not to do. We also know that the visitor came to your site looking for specific content, usually having followed a link from somewhere. Now it's time to start giving them ways of doing that. If you're not using WordPress and you're lazy, the Google 404 widget might be helpful. If you are using WordPress, we can do better than that.

Let's let us be inspired by some great 404 error pages:

I'll be honest: the Conversion Rate Experts guys have inspired the first version of my 404 error page. They offer you 4 options to get to the content you were looking for:

1. search
2. check the URL for misspellings
3. check the sitemap
4. start over at the homepage

That's a great start. Apple gives you a sitemap straight away. Depending on your site's structure that might be a great idea too.

I wanted to add one more thing: a set of pages that actually might be related to the URL people had typed in. To do that, we'd have to parse the URL and see if there's something useful in there. Let's see what we have to work with:

What data does a 404 error page provide?

A lot of people seem to think that a 404 page is a dead end street. It's not, there's a whole lot of data that can help you find the content your visitor was looking for. Let's start with the URL: it contains something very useful. All the text that's there after the slash of your domain should be pointing you to what it is the person was looking for.

Luckily, WordPress stores that information for you. The $wp_query->query_vars['name'] variable holds whatever was in there. It does do some replacing in there though, it replaces all weird entities with a dash (-). We'll use this bit of information to spice up your 404 error page.

First of all, let's check whether there's a direct match for that var in a page name once you strip out all the things that people sometimes add to your URL erroneously. (If you read on there's an adapted version of the Kubrick 404 page which you can use to update your own themes.)

$s = $wp_query->query_vars['name'];
$s = preg_replace("/(.*)-(html|htm|php|asp|aspx)$/","$1",$s);
$posts = query_posts( array( 'post_type' => 'any', 'name' => $s) );

If that doesn't deliver results, you'll want to do a search for that word, to do that we'll have to rip out the dashes in the name, and then do the search. As we're going to re-use the $s variable further on, we'll do that outside of the if statement to check whether the previous query delivered results:

$s = str_replace("-"," ",$s);
if (count($posts) == 0) {
  $posts = query_posts(array( array('post_type' => 'any', 'name' => $s) );
}

Now we have an array with posts, at least, we hope we do, so let's check that, and loop through it:

if (count($posts) > 0) {
  echo "<p>Were you looking for <strong>one of the following</strong> posts
    or pages?</p>";
  echo "<ul>";
  foreach ($posts as $post) {
    echo '<li>';
    echo '<a href="'.get_permalink($post->ID).'">'.$post->post_title.'</a>';
    echo '</li>';
  }
  echo "</ul>";
}

I've made an adapted version of the Kubrick 404 error page, which you can download here.

There's a plugin that does something similar to the above, called Smart 404. It chooses to redirect the visitor to the first result it gets. It wouldn't be my preference, I actually want people to notice that the URL was wrong.

So now we have a great 404 error page, but we haven't used all the data that we were provided with. Another bit of data the 404 provides is the referrer: someone linked to your page with a wrong URL, or is linking to a page that isn't there anymore. So we've got one thing left to do:

Preventing 404 error pages

There's a very cool plugin called 404 notifier by Alex King, which can provide you with an RSS feed of the 404's on your site, and Redirection, one of my all time favorite plugins, offers the same functionality. You could also use my own Google Analytics for WordPress plugin. It tracks the 404's as 404.html (look for them in your content report).

Using Google Analytics has the added advantage that it saves the referrer, so you know which URL the visitor originated from. This allows you to not only redirect the URL to the correct place, but also to ask the site that referred the visitor to fix the URL.

Another great way to keep track of 404's on your site is using Google Webmaster Tools. In the Diagnostics - Crawl Errors area of Webmaster Tools Google gives you a great overview of what 404's it encountered on your site:

Two Things you Need to Know about 404 error pages

These are things that WordPress is doing right, but it's good to know these things:

• Internet Explorer will only show your custom 404 page if it's larger than 512 bytes (hard to get smaller than that with WordPress).
• 404 is not only the name, it's also the HTTP header that the page should send, if not, you might end up with 404 pages in the search engines indexes. You can easily check this with a HTTP header checker.

As said, no need to worry if you're using WordPress, but good to know these things.

There's really no excuse left now for a bad 404 error page on your WordPress blog or anywhere else, so go fix yours! Once you've done that, drop your site's URL in the comments, and I'll make a small gallery of cool 404 error pages in this post.