The Ultimate Essential Guidelines for WordPress 404 Error Pages

by in Development on 21st Jul 2010 · Comments

WordPress is a popular blogging platform with its ease of use and development by many experts on the web in the way of themes, plugins, and many more features that we can use for free or under a commercial license. WordPress work-flow basically is about storing the blog's content data to the database and then retrieving it with PHP and finally displaying it to the visitors. However, if the contents that we're trying to retrieve no longer exist in the database, as a result there would be a 404 error page.

WordPress 404 Error Pages


You can imagine how frustrating it can be when you have clicked on a link from an article page or from a search result on Google, you're in a bit of a hurry and want to see the content, but the page you’re waiting for couldn’t be found! Disaster! How can this be happening? We will discuss this in this article.

Overview 404 Error Pages

Error 404 is a standard HTTP (HyperText Transfer Protocol) status code. The "Not Found" respond code, shows that a client (browser) isn’t able to make contact with a server, this happens because the server can’t complete the request made by the client, or the browser configuration wasn’t properly setup to fulfill the request.

Overview 404 Error Pages
Image credit: Ben Heine

The 404 "Page Not Found" failure message is an error page which is displayed each time a client/browser requests an unavailable page from a website. How could this be unavailable? Below are the common factors causing the visitor to reach the 404 error page on a website:

  • The Wrong Address Link: Often caused by typing errors or truncations.
  • The Lost Page: Possibly it happened because the site’s content had been deleted or it’s in a reconstruction progress.
  • The Contents Blocked (Private/Restricted Pages): The filtering system of a server is also capable of returning an HTTP 404 response when users are trying to access a blocked content through a browser.

Read more detail through the links below:

How to Deal With 404 Error Pages

For some visitors, it is quite annoying to be faced with a 404 error page from a website that fails to display the content they wish to view. They will usually assume that the content is no longer available on the website as it may have been deleted by the owner. If they think this, they will move onto what they consider to be more reliable sites. But what if the content has just had the address/URL redirected?

How to Deal With 404 Error Pages
Image credit: Twoeyes

Of course, it’s a loss for the visitor and especially the site owner as he/she is losing traffic from their site, disappointing visitors by displaying a content error. Below are some tips to help site owners to keep their visitors on their site longer.

PHP Redirect

If your 404 error page is formatted in PHP, then this PHP redirection method will be very effective, because it's supported by all browsers on the web. These are the sample codes:

header ("Location: url");
exit();

JavaScript Redirect

Below is the sample codes for JavaScript to redirect visitors to the pages which you think will attract their attention. These are the sample codes:

<script type="text/javascript">
<!-- window.location = http://your_url_name/ //-->
</script>

That will lead to this:

<a href=”http://your_url_name/”>click here if you’re not redirected automatically.</a>

The purpose of “Click here if you’re not redirected automatically.” message is solely to alert the visitors when they’re not activating the JavaScript function on their browser.

Redirect with a .htaccess / htaccess.txt

This is a good choice, because the effect would globally touch the sub-domain that you own. This is the line which should be added to your .htaccess/htaccess.txt file:

ErrorDocument 404 error/http://www.yourwebsite/

So, we have at least 3 ways above that we can use for handling 404 error page. But generally it’s been automatically configured for a website/blog which is based on Content Management System like WordPress. In addition, we just have to add one from the two codes above (JavaScript or PHP) onto its 404 default.

404 Codes
Image credit: Ezu

Or perhaps you intend to make your own error page for your site, this can also be done. Below are the sample instances in PHP:

<?php
/* Error page: ErrorPage.php */
?>
<html>
<head><title>404 Error Page</title></head>
<body>
<p>
<h1>Error 404</h1><br>Sorry, Page Not Found.
<p>
<?php
$ip = getenv ("REMOTE_ADDR");
$requri = getenv ("REQUEST_URI");
$servname = getenv ("SERVER_NAME");
$combine = $ip . "tried to load" . $servname . $requri;
$httpref = getenv ("HTTP_REFERER");
$httpagent = getenv ("HTTP_USER_AGENT");
$today = date("D M j Y g:i:s a T");
$note = "Sorry, nothing here!";
$message = "$today <br>\n
$combine <br> \n
User Agent = $httpagent \n
<h2> $note </h2>\n
<br> $httpref ";
$message2 = "$today \n
$combine \n
User Agent = $httpagent \n
$note \n
$httpref ";
$to = "you@yourdomain.com"; \\ change to your email address
$subject = "Error Page from Your Site"; \\ change email subject
$from = "From: wordpress@yourdomain.com\r\n";

mail($to, $subject, $message2, $from);
echo $message;
?>

Visit our <a href="yourdomain.com">Home Page</a>

</body>
</html>

Done. You can now refer users to 404 error message substitutes on your website. Further, it will send an email to you automatically when visitors reach a 404 error page on your website, so they no longer need to report to you by email. Yes, just like that! You can copy and put it on the server. Remember you have to configure your .htaccess file on the server by adding the line below that will refer to your error page file, here is the code:

ErrorDocument 404 error/ErrorPage.php

When you're finished with the codes, you can now try it.

Tips In Designing 404 Error Pages Effectively

Sometimes it looks poor showing the standard design of 404 error pages. There are some points to consider in designing a 404 error page for your website.

Tips in Designing 404 Error Pages Effectively
Images credit: Feeling Croppy

Tell Them It's Not Found (Lost/Missed/Anything!)

It's obvious that you have to impart this message to your visitors so they’ll understand that the content/information they’re searching for isn’t available on the website. You can say it in brief, like "We’re sorry, the page is not available” or maybe like this “OMG, how could this happen? This is embarrassing”. Try other words that you think suit your visitors style/taste. And remember, do not use sentences that impose the blame on your visitors.

Display the Main Menu

Yes, it’s correct to display the main menu, so that visitors have more access to the contents on your website, not just a link that refers them only to your homepage. Thus, the visitors exploring passion would spread to the various topics of contents or categories.

Combine With The Available Content

If you think that with offering other content to visitors on your website is pretty catchy, then go for it! Try to combine with actual content that you have. It could be a popular article on your website, featured content or archived content that you have on your site? You’re free with your ideas, the point is to make the visitors interested for as long as possible in your website.

Use Your Site's Theme Design

I’m sure you don’t like to see your 404 error page appear in plain and unformatted design like the other sites. By using the theme design of your site, your 404 error page will look much more creative and user friendly with your logo, color scheme, perhaps cartoon characters that you like and many more ideas you can use to make your visitors no longer feel in exile when they couldn’t find what they were searching for on your website. They can immediately refer to what you’ve offered them in point 2 and 3 above.

Show The Search Box!

This last point shouldn’t be an option, you should have a search box on your 404 error page. The reason is if the visitor isn’t interested in point 2 and 3 you’ve offered above, they could still do a content search, based on the topics they’re interested in on your site. This will make visitors feel more at liberty to explore your site and you as the site owner will also get benefits from gaining traffic to the content that is found by visitors through this search box facility.

Yes, these should be the things to consider when you’re designing your 404 error page effectively to hold the attention of your visitors when they can’t find something on your site. You can also configure your 404 error page to send you an email automatically when your visitors reach it on your site.

Examples of Error 404 Pages

Below is a list of links to 404 error messages from various sites with creative graphics and taste. Perhaps you can learn something from these, or are there any other elements that you think are worth adding to make it even more attractive? I think this has its own value to your visitors that you are taking care of your website neatly and with attention to detail.

Jamie Huskisson
Jamie Huskisson

Mundofox
Mundofox

Henrik Hedegaard
Henrik Hedegaard

YouCastr
YouCastr

Rocket Theme
Rocket Theme

InstantShift
InstantShift

Koller Media
Koller Media

Ateaseweb
Ateaseweb

Cut and Taste
Cut and Taste

45royale Inc.
45royale Inc.

Heinz
Heinz

OnWired
OnWired

Abduzeedo
Abduzeedo

Wufoo
Wufoo

Rush68
Rush68

Tele2
Tele2

Centerd!
Centerd!

Fotolia - Royalty Free Stock Photos
Fotolia - Royalty Free Stock Photos

Surfing On Static
Surfing On Static

RegTag
RedTag

WordPress Plugins to Keep Tracking Error 404 Page

Luckily for WordPress, they have huge support from many developers out there. There are many WordPress plugin developers created plugins that help us to keep an eye on our site, monitor how many visitors have reached the 404 error page. Here are some WordPress plugins that will help you to manage, monitor and customize your 404 error page more efficiently, so your visitors don't need to leave your site right away.

Tracking Error 404 Page
Image credit: Truanty

404 SEO Plugin
This simple plugin will give you a customized, smart ‘Page Not Found(404)’ error message. It will automatically display links to relevant pages on your site, based on the words in the URL that was not found.

Google 404 Error pages
The Google 404 plugin is a quick and easy way to embed a search box on your custom 404 page and provide users with useful information designed to help them find the information they need. Where it can, the Google widget will suggest other ways for the user to find the information they need, thus increasing the likelihood that they’ll continue to explore your site.

Redirection Plugin
This is a great plugin that handles all sorts of errors. Includes 404 error monitoring – captures a log of 404 errors and allows you to easily map these to 301 redirects.

404 Notifier
Detects and notify you of all the 404 errors that might creep in on the site unknowingly.

Smart 404
This plugin will perform a search of your posts, pages, tags and categories, using keywords from the requested URL and the search term. If there’s a match, it redirects to that matched content instead of showing the 404 error.

Permalinks Moved Permanently
This plugin is helpful if you change the permalink structure of your blog and don't want to lose out on incoming links going to your old pages.

AskApache
AskApache Google 404 is a must-have WordPress plugin that uses some ajax and a couple tricks to display a very helpful and SEO Error Page. The default displays Google Search Results for images, news, blogs, videos, web, custom search engine, and your own site.

Dunstan style 404 error page
This plugin makes your 404 error pages more interactive giving the user various options like recent posts, feedback forms etc.

Useful 404’s
As the name suggests, creates a more useful 404 error page, including email notifications for bad links.

Summary

It all depends on you where you want to redirect your visitors when they reach the 404 error page on your website. Many sites redirect visitors to their homepage, there are also some sites that redirect visitors to the membership registration page of their website, or maybe you have other ideas?

There are also some sites which creatively place a pre-direct as an advertisement page along with a message to the content page that they are referring the visitor to. Thereby, the ad revenue will be increased through this 404 page. If you want to, you could also increase your other website traffic, by redirecting the visitors to your other website where you want the traffic to be increased. But I don’t recommend this idea, these are only examples of ways that we can be seen on the web. Apart from ethical considerations and other things, the potential traffic we can obtain from 404 error pages is pretty fair, more so for the newly CMS migrated, or in progress of reconstruction websites.

And now it’s time for you to share what you know about 404 error pages, or tell us what you have done differently or maybe you have seen a different, inspiring, funny or pleasing page. Please feel free to let us know, don’t hesitate to leave your comments.

Further Reading and References

Eleven steps to creating a killer 404 error page
Which brings up what many webmasters have been pondering… what exactly should go on a custom 404 page? Here are eleven things that should go on your custom 404 page.

How to Create an Informative “404 Error” Page
Before you start messing with your 404 page, or even before I really get into further detail, you need to remember the K.I.S.S concept (Keep it Short and Simple, or Keep it Simple, Stupid). That’s basically saying to keep your design simple and away from anything that may serve complex. So just remember that through this post.

Creative 404 Error Pages With Characters
You can use a 404 error page to communicate with your visitor and tell them what to do next. Here I have collected creative examples of 404 error page designs in which you will find characters communicating with you in their own way.

404 Error Pages: Reloaded
The choice wasn’t easy, so evaluating the quality of the entries we’ve considered – among other things - the communication with visitors, precise and clear navigation, the use of graphics, creative ideas and some outstanding solutions. Some of the solutions presented below might not be as helpful as they could or should be, however they include some creative approaches you should be aware of designing your 404 error pages. Here is what you’ve come out with: over 40 working examples of user-friendly, creative and outstanding 404 error pages in a brief overview.

404 Error Pages – 30+ Examples
When you have been trawling around the internet for hours researching or searching, it is quite likely you will make a mistake inputting a website address, or somehow get lost on a site. How lovely, under those circumstances, to be directed to a custom 404 error page that makes you smile or think ‘that’s a bit different’.

He is a 22 year old creative and also freelance web designer and developer from Jakarta, Indonesia. Write about everything related to design, trending topics in web development and symbian phone. Loves color, design, blog, WordPress, and has an unhealthy addictions to smiles and laughs.