Advertisement
Theme Development

How To Create A Simple 404 Error Page For WordPress Themes

by

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?

A classic default 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:

    

Page Not Found

Sorry, but the page you requested has not been found


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.

  1. 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.
  2. Suggest that the user checks their address bar to ensure there are no typos in the web address.
  3. Display/point out a search box allowing the user to search your website for the content they were looking for.
  4. Suggest articles the user might have been looking for based on the page they requested/popular entries on your website.
  5. Give the user a list of "what you can do now" options, such as going to your home page or browsing your archives.
  6. 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:webmaster@website.com">tell me</a> about this error, so that I can fix it. Thanks!</p>
    </div>
    <?php get_sidebar(); get_footer(); ?>
Tutsplus 404 page

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.

Related Posts
  • Code
    PHP
    Creating a Photo Tag Wall With Twilio Picture Messaging & PHPProcedural to oop php retina preview
    Twilio's recently announced Picture Messaging has vastly opened up what we can do with text messaging, now we can attach photos to our text messages and have them get used in different ways. In our case, we are going to build a Photo Tag Wall, which will contain photos linked to tags that will be displayed on a website.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Code
    PHP
    Authentication With Laravel 4Laravel 4 auth retina preview
    Authentication is required for virtually any type of web application. In this tutorial, I'd like to show you how you can go about creating a small authentication application using Laravel 4. We'll start from the very beginning by creating our Laravel app using composer, creating the database, loading in the Twitter Bootstrap, creating a main layout, registering users, logging in and out, and protecting routes using filters. We've got a lot of code to cover, so let's get started!Read More…
  • Code
    Plugins
    Communicating With the WordPress.org Plugin APIWordpressdotorg plugin api border 400
    Over the last few weeks I have been wondering on how to possibly pull data about my plugins hosted on WordPress.org and display it on my website. The first thing that came to mind was "Web Scrapping" but quite frankly this is a lot of work, feels like going back in time, and is not something a good web citizen should do. In some cases, it could be illegal.Read More…
  • Code
    Creative Coding
    A Look at the WordPress HTTP API: A Practical Example of wp_remote_postDiagram http api
    In the previous article, we reviewed the previous articles regarding GET requests, the native PHP facilities for making requests, and reviewed WordPress wp_remote_post API function along with the arguments that it offers. In this article, we're going to make use of wp_remote_post such that we're actually able to see it in action. Remember that this - like wp_remote_post - is part of the HTTP API of which there are other functions worth reviewing. But, for now, we're going to put wp_remote_post to work. Specifically, we're going to do the following: When the page loads, we're going to submit some information to a custom script The script will examine the information and return it to our page We'll then display the data on the page Sure, it's a bit of a contrived example but it will give us the experience of creating a separate PHP script that can be used for operations triggered by the use of wp_remote_post. Anyway, for the purposes of this example, we are going to use the PHP $_SERVER collection to log when the user has submitted their preference rather than require that they have logged in. Finally, the source code will be made available on GitHub and accessible at the end of this series in the following article. For now however, let's get started with working on the plugin.Read More…
  • Code
    Python
    Intro to Flask: Signing In and OutFlask preview 400
    Many web applications require users to sign in and out in order to perform important tasks (like administration duties). In this article, we'll create an authentication system for our application.Read More…