"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:
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.
- 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.
<?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(); ?>
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.
Posted in: 
