Frederick's Timelog

Customizing 404 error pages (on WordPress blogs)

If you’ve ever seen a 404 error (“not found”), you’ll relate to the frustration that users experience when all they get is a “Sorry, can’t help you” type of message.

That’s why I’ve customized the 404 errors on Frederick’s Timelog to be a bit more user-friendly.

If you go to any random non-existent page (for instance, http://www.frederickding.com/posts/234u0af) you will come up against a 404 page with an evident error. The red background immediately indicates a problem, while the blue section indicates possible remedies.

On a random URL, the possible remedies are limited to a site search. However, if you go to a misspelling (for instance, http://www.frederickding.com/podcasts as opposed to http://www.frederickding.com/podcast), there’s a neat feature that says “Go to [the correct URL]“.

How was this accomplished? (Code samples follow after the jump.)

First of all, I created a “404.php” file in my theme directory. WordPress automatically looks for this file if it encounters a 404 error, and uses it to send a response to the client. (If it is not present, WordPress can also use the “else” part in “index.php”.)

I created the first div with CSS styling and a basic message: (depending on your theme, the code may or may not work properly)

/* This is the CSS */
div.rederror {
    color: #000000; text-align: center;
    background: #FE7777;
    padding: 5px; margin: auto;
}

Not Found

Sorry, but the resource you are looking for could not
be found. This is also known as a "404" error.

To read what I have done to create this error page,
go to my post about customizing 404 pages.

How did I accomplish the “Go to [the correct URL]” system? Well, I noticed a new feature in Google Webmaster Tools one day:

So I took it for a spin. After a few tweaks (supplementing the default search box with a custom search that displayed results on my own site), I ended up with the following as the blue div:

You could...





Didn't find what you were looking for? Search our site with Google.

Note: the code above has been slightly adapted for publishing. Also note that, in strict XHTML, CSS and JavaScript code must be enclosed within “<![CDATA” sections.

And that’s how I ended up with nice, user-friendly and helpful 404 error pages on my WordPress blog.

Was this post useful to you? Share it (using the link below), link to this post, or comment below!