Wordpress Hack #4: Create A Custom Error 404 Page

In this “Wordpress Hack” you’ll learn how to create a custom 404 Error page for your blog. It’s helps your visitors find what they need, and also helps you not lose visitors!

The Wordpress “Hack-A-Thon” continues in our “30 Wordpress Hacks in 30 Days Series” to help you get control of your blog!

One page you probably don’t look at very often (if ever) is your 404 Error page. What is a 404 error? It’s when someone tries to visit something on your web site and it isn’t there - the webserver displays an error page. Normally the page is white with plain black text with a short message about “the page you’re looking for cannot be found”. Wordpress displays a custom 404 page based on the template file “404.php” contained within your theme directory, but by default most themes don’t have much more than “Error 404 Not Found”.

Currently my 404 error page is pretty useless showing just a heading “Error 404 Not found” and a white blank screen inside my wordpress template. I’m going to fix that as I write this hack for you. What causes these 404 errors? It only happens 2 ways, either somebody types or pastes in a bad address in the URL field of the browser, or somebody clicks on a bad link (on your site or from another site). When Wordpess can’t find the page or content it displays a page using the 404.php error. This would be a good time to mention the 404 Notifier Wordpress Plugin that will email you every time someone gets a 404 error on your site. It’s an important gauge of whether people are having issues with your content (being found) or not.

A good place to start would be the Wordpress Codex page on Creating an Error 404 Page. The first thing it says is that you want to remove the ugly error and replace it with something that will help visitors find their way. I couldn’t have said it better myself.

It also says that you are looking for the following text, and should modify the H2 header and add some paragraphs of text below it:

<div id="content">

<h2 class="center">Error 404 - Not Found</h2>

</div>

There isn’t a lot of “codey hocus pocus” going on there, you just want to give users a friend message, some text to humor and help them, and then it’s up to your where you want to direct them next. Some of you may want to list your most popular posts, or maybe certain categories or pages, but in my case I want to link to only a few of those. Then I’m going to enlist the help of the Ask Apache Google 404 Wordpress Plugin. It’s going to try and figure out (based on the URL) what it was they were trying to find, and display google results (for your site) to the user to try and help. I personally would prefer this plugin to search my blog only for results, but since this is the only plugin I could find that does this - google results will have to do. Check out how pimped out my 404 page looks now!

As you can see in the image above (or the link to view it directly) - we’ve come a long way baby! No more bland error page, now we get an email every time a 404 not found error is generated, and the users get a friendly message with automatic google results to try and find what they were looking for! Like I initially said - this hack helps our visitors, and helps us “keep” our visitors on the site all at the same time!

Here are some other good 404 examples to look at for inspiration:

Problogger’s 404 Page
Smashing Magazine’s Error Pages Reloaded
Web Professor’s 404
Home Star Runner

As always - if you have questions or something to add to make this hack even better, please comment now! Stay tuned for tomorrow’s Wordpress hack so we can keep pimpin’ out our blogs!

Tags: 404 error, blog-help, tutorial, wordpress-hacks, wordpress-templates, wordpress-theme