Last week we discussed a few measures you can take to reduce the chances of visitors to your site hitting a 404 error page. But there is only so much you can do – there will always be broken links and mistyped URLs. Because 404 errors are impossible to prevent entirely, you need to make sure that your 404 error page is designed in a way that will maximize the chances of visitors hanging around.

Few sites have a good 404 error page – you only have to look at template pages from popular themes to understand why:

Above is the Thesis theme’s default 404 error page. Almost everything about this is wrong. The headline is nonsensical, it encourages people to leave your site by suggesting they hit the “back” button, and they even suggest that you “punt”. Answers on a postcard for any of who you understand the relevance of that.

How It Should Be Done

There are good 404 error pages out there. And the good news is that they are not particularly complicated. Let’s take a look at some sites that are doing it right.

ProBlogger

The headline is simple and clear, the sub-header moves straight onto how the error can be resolved, and the rest of the page then features multiple methods of finding content (including most popular and beginner posts).

Photobucket

Photobucket is an image-driven site, and the 404 error page takes advantage of that by offering up a search feature as well as the most popular categories.

Jamie Huskisson

This page blends creativity with functionality very nicely. The colorful image captures your attention, the humorous text is engaging, and you are then presented with a search box and a link to Jamie’s post archives.

45royale Inc.

This is similar to the previous page in that it blends humor with functionality. Visitors who hit this page are immediately presented with a list of the site’s most popular blog posts.

Inspiration Bit

This 404 error page offers up three potential options to lost visitors – popular posts, recommended posts, and favorite posts. Lots to choose from.

Commonalities and Best Practices

You should have noticed a pattern evolving amongst the five examples above. First of all, your own 404 error page should be voiced appropriately:

• Clarity – be clear and concise with the user in explaining that an error has occured
• Courteousness – be polite and apologize for the inconvenience
• Humor – not strictly necessary, but can be used effectively to engage with the visitor

• Alternative options – divert visitors to popular/recommended posts
• A search function – so that the visitor can attempt to find what they were looking for

You can put just a few minutes into creating a simple yet effective 404 error page (like ProBlogger’s), or you can invest some time in producing something unique and entertaining (like Jamie Huskisson’s). It is entirely up to you, but the key is in retention. If you create a page with the above criteria in mind, you will be giving yourself the best possible chance of decreasing the bounce rate on your 404 error page.

How To Edit Your 404 Page

It is remarkably easy to edit your 404 page, even if you are not technically minded. Most themes come with a default 404 template page, which can be found by accessing WordPress’ build in file editor:

In this example I am using the default WordPress Twenty Eleven theme. Once you are within the file editor interface, look for the file listed to the right named “404.php”:

The 404.php file is what WordPress will refer to whenever it encounters the appropriate error when attempting to display a page on your site.

What you are presented with may seem like gobbledegook, but if you open up a preview of the 404 page (just type in “www.yoursite.com/abc123” or something similar into your browser) you should be able to see where you can make changes.

Please note that we strongly recommend that you take a backup of any files you change before you do anything. Furthermore, FTP access to your site is recommended, so that you can restore corrupted files if something goes wrong.

Here is an example of two particular parts of the page that I have identified:

In the above example, you could change the text by replacing the relevant parts of what you see within the orange box, or remove the search form by deleting the text boxed in blue.

Starting From Scratch

If you don’t like what you see in the 404.php page, then the simplest thing to do is start with the default page.php template. This is the template that displays all pages by default, and is likely to be the most understandable in terms of its contents. The following is what you will find in Twenty Eleven’s page.php:

In order to create our very own 404.php page, all we need to do is delete the contents of the orange box (which just leaves us with a “shell” featuring the header and footer), and replace the existing contents of the 404.php file with what is left.

It is then up to you to populate the 404 error page as you see fit. A simple headline, a bit of explanatory text, then the next step options. Here are a few simple php includes that you can paste into your file to get you started:

• <?php wp_list_cats(); ?> – category list
  
• <?php wp_tag_cloud(); ?> – tag cloud
• <?php get_archives(); ?> – post archives
• <?php get_search_form(); ?> – search form

There’s No Excuse!

It doesn’t take long to produce a useful 404 page that over time will turn many potential “bouncers” into regular visitors. You don’t have to work miracles, nor do you have to be a technical genius – just a few minutes (or longer if you like) is all it takes. And once you are finished, you don’t have to worry about it again!

So what about you – have you created your own custom 404 error page? If so, feel free to link to it in the comments section so that we can take a look! If not, what is holding you back?

Header image courtesy of Slonky