How To Create A Simple 404 Error Page For WordPress Themes

A visitor can encounter a 404 error for a number of reasons. As a website owner, you should ensure that the user experience of your website doesn't leave your visitor feeling lost or confused when this happens. Creating a custom 404 page is easy using the 404.php template in your WordPress theme, and it can go a long way to ensuring a visitor remains on your website, even after they encounter a 404 error.

What is a 404 page?

Adding a custom 404 page to your WordPress theme is simple. All you need to do is have a file named ’404.php’ in your theme directory...

A 404 'Not Found' error page is a page generated by the server to inform you that the content you were trying to access on the website cannot be found. Typically you will encounter a 404 error when something has been moved or deleted, or when you click a link/type a website address with a typo in it.

I encounter 404 pages all of the time, usually because I type a lot of web addresses rather than use bookmarks, and I have clumsy fingers. This will often lead me to requesting www.google.com/mial, instead of the GMail page I intended. Very frustrating! A few years ago 404 pages were nothing more than the standard server 404 page, but in recent times developers and designers have taken it upon themselves to create more user-friendly 404 pages, to let you know where you are, why you got there, and where you can go now.

How To Add A Custom 404 Page To Your Theme

Now let's look at how to actually add a 404 page that's customized to your theme. Adding a custom 404 page is simple; All you need to do is have a file named '404.php' in your theme directory. Of course, if your '404.php' file is empty, then the '404 Not Found' page that gets displayed to users will be blank.

A quick method of making a custom 404 page that ties in nicely with your theme is to copy the contents of the 'page.php' file in your theme to your new '404.php' file. Once you've done that, remove all of the code referring to The Loop and replace it with the following code:

    <h1>Page Not Found</h1>
    <p>Sorry, but the page you requested has not been found</p>

How To Make Your 404 Page Great

If a user has arrived at a 404 page on your website, what you really want to do is help them get to the content they intended to arrive at. If the server's default 404 page is displayed, chances are the user is going to hit 'Back' and find the content they were looking for somewhere else.

To help the user find the content they were looking for, you should implement the following elements on your custom 404 page. These things may already be part of your theme, and therefore already exist on your 404 page (if you copied the code from your 'page.php' file, for example), in which case you should point them out to the user.

Display an apologetic message explaining that the content the user requested has not been found. Mentioning the error code "404" isn't really necessary, but you can put it there if you like.
Suggest that the user checks their address bar to ensure there are no typos in the web address.
Display/point out a search box allowing the user to search your website for the content they were looking for.
Suggest articles the user might have been looking for based on the page they requested/popular entries on your website.
Give the user a list of "what you can do now" options, such as going to your home page or browsing your archives.
Finally, allow the user to report the error to you by including an e-mail link/contact form/Tweet button so that you can fix the error where applicable.

In my imaginary theme, I would implement the above something like this:

    <?php get_header(); ?>
    <div id="page">
        <h1>Page Not Found</h1>
        <p>We're very sorry, but the page you requested has not been found! It may have been moved or deleted.</p>
        <p>I'm not blaming you, but have you checked your address bar? There might be a typo in the URL.</p>
        <p>If there isn't, you could try searching my website for the content you were looking for:</p>
        <?php get_search_form(); ?>
        <p>Or maybe you were looking for one of my popular posts:</p>
        <ul>
            <li><a href="http://www.website.com/popular-post1">Popular Post 1</a></li>
            <li><a href="http://www.website.com/popular-post2">Popular Post 2</a></li>
            <li><a href="http://www.website.com/popular-post3">Popular Post 3</a></li>
            <li><a href="http://www.website.com/popular-post4">Popular Post 4</a></li>
        </ul>
        <p>Alternatively, you can go to <a href="http://www.website.com">my home page</a> or <a href="http://www.website.com/archives">browse my archives</a></p>
        <p>One last thing, if you're feeling so kind, please <a href="mailto:[email protected]">tell me</a> about this error, so that I can fix it. Thanks!</p>
    </div>
    <?php get_sidebar(); get_footer(); ?>

The Key Elements

If you can nail the "helpful" part of your 404 page, you're welcome to add humor and design perks after the fact... Just don't put the cart before the horse.

Now let's break down the key elements that we used:

The very basics: We're using the 404.php filename, so that WordPress knows to use this as the error page template.
Our page title (inside an H1 tag) clearly states that a page wasn't found.
Offer a brief text explanation and offer some alternative solutions (check the URL).
Provide a search bar (using the default WP search form function)
Provide at the very least, a link to the archives. Advanced users might want to include a page, category or tag listing right here on this page as well.
Provide a contact for people to report errors.

Whilst it's often very tempting to leave a humorous image & note on your 404 page, try to be as helpful as possible first, and funny later. Despite the fact there are entire websites dedicated to the hilarity of certain 404 pages, ensuring a visitor stays on and returns to your website is your first priority (unless you intend to be featured on one of those websites, in which case, go nuts!)

Other Considerations

When a user arrives at a 404 page, and it's not because there is a typo in the URL (most users don't type in URLs directly), so chances are good that you have either moved something or deleted something.

Redirect Old Content

When moving content, you should always redirect the old URL to the new URL, as this is a simple and effective way of ensuring that all visitors intending to reach that content are able to. Redirecting is a fairly simple task in WordPress when you use the popular plugin, Redirection. This plugin also allows you to monitor the 404 errors generated by your server, and what URL was requested when the 404 was generated. This allows you to redirect that URL to the correct location, thus improving your overall user experience.

Going an Extra Step

As we mentioned above, a truly great 404 page doesn't even need to look like a 404 page... by including things like a full page, category and tag listing, you can not only help fill out the page design, you can provide immediate links for users to browse rather than expecting them to spend time trying to refine their search. Also consider providing a list of "popular" content... sometimes popular content can be better than relevant content if your goal is to keep 404 visitors on the site.

Don't Delete the Posts; Delete the Content.

Finally, when deleting content, consider simply deleting the page/post content, rather than the entire post/page, and informing your visitors why you have removed the content. You could take that a step further and recommend alternative sources where a user could find similar content to the content you have removed. This helps prevent "link-rot" on your site while still removing the content that you want to disappear.

HIGHLIGHTS OF THE DAY