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; }
<div class="entry"> <div class="rederror"> <h2>Not Found</h2> <p>Sorry, but the resource you are looking for could not be found. <br />This is also known as a "404" error.</p> <p>To read what I have done to create this error page, go to my post about customizing 404 pages.</p> </div> </div>
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:
<div class="entry">
<style type="text/css">
#goog-wm { text-align: center; }
#goog-wm h3.closest-match {
border-bottom: 3px dashed #aebd63;
padding-bottom: 0.5em;
font-size: 170%;
margin: 0;
}
#goog-wm h3.other-things,
#goog-wm li.search-goog { display: none; }
</style>
<script type="text/javascript">
var GOOG_FIXURL_LANG = 'en';
var GOOG_FIXURL_SITE = 'http://www.frederickding.com/';
</script>
<div style="margin: auto; text-align: center;
background: #BFE4FF; padding: 5px;">
<h2>You could...</h2>
<script type="text/javascript"
src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js">
</script>
<div class="clear" style="margin-top: 10px; margin-left: auto;
margin-right: auto; text-align: center;">
<form action="http://www.frederickding.com/google-search/"
id="cse-search-box" style="margin-left: auto; margin-right: auto;">
<p>Didn't find what you were looking for? Search our site with Google.</p>
<input type="hidden" name="cx"
value="005975357998507835125:l_j1pdu3qhq" />
<input type="hidden" name="cof" value="FORID:11" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="50" />
<input type="submit" name="sa" value="Search" />
</form>
</div>
<script type="text/javascript"
src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en">
</script>Note: the code above has been slightly adapted for publishing. Also note that, in strict XHTML, CSS and JavaScript code must be enclosed within “<
hi. Thanks for plugin
perfect.
Regards