5 of the Best 404 Error Pages and How to Build Your Own

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.
5 of the Best 404 Error Pages and How to Build Your Own

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:

Thesis 404 Error Page

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

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

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

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.

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

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:

Secondly, it should offer practical next steps for your visitors:
One other thing – don’t make a big fuss about “404” itself. A lot of people do not even know what it means. “Page Not Found” is a far more descriptive and easily understandable statement.

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:

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”:

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:

404.php 404 Error Page

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:

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:

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

Tom Ewer

Tom Ewer is the founder of WordCandy.co. He has been a huge fan of WordPress since he first laid eyes on it, and has been writing educational and informative content for WordPress users since 2011. When he's not working, you're likely to find him outdoors somewhere – as far away from a screen as possible!

6 Comments

  1. Daniel Keith

    Hi Tom,
    It’s a great article indeed. Really very innovative ideas to customize the 404 page.

    Thanks for sharing your professional experience!

  2. Paul Ward

    I found a good 404 page here – http://www.pellacraft.com/404

    1. Tom Ewer

      Author

      To be honest, I think that’s an example of a bad 404 page. It’s ambiguous, lacking practical functionality and won’t make much sense to the majority of readers.

  3. Cynthia York Martin

    I have a lot of 404pages.

  4. Dan Ware

    A cool animated 404 here- http://www.piggy-bank.co.uk/error/404/

    1. Tom Ewer

      Author

      Ha – nice! Not very functional, but certainly cool.

Leave a Reply

Your email address will not be published. Required fields are marked *

Over 65,000 WordPress professionals are already using ManageWP

Add as many websites as you want for free, no credit card required. Sign up and start saving time!

Have questions? Get in touch!

Over 65,000 WordPress professionals are already using ManageWP

Add as many websites as you want for free, no credit card required. Sign up and start saving time!



Have questions? Get in touch!

Over 65,000 WordPress professionals are already using ManageWP

Add as many websites as you want for free, no credit card required. Sign up and start saving time!



Have questions? Get in touch!

Over 65,000 WordPress professionals are already using ManageWP

Add as many websites as you want for free, no credit card required. Sign up and start saving time!



Have questions? Get in touch!