Customize Your Blog’s Error Page in 5 Easy Steps

This is part of the Blogging for Grasshoppers series

Here’s how to customize your 404 error page in 5 easy steps

which is a wise thing to do for bloggers, grasshoppers or not. First, you…

Image: Kate Sumbler via Flickr, Creative Commons

Hold on! Don’t you want the back story first?

A while back, I was looking at my Google Analytics for WUL and I noticed that my 404 page, i.e. the one you get when the server can’t find the page you’re looking for on a particular site, was the 4th most highly-trafficked page on my blog.

Fourth?!

Yikes.

I say “yikes” because this could quite conceivably irritate people trying to find something on my blog.

And they wouldn’t bother to poke around on the blog to find it.

Because, let’s face it, this isn’t exactly the New Yorker of PR blogs. Yet.

So they’d leave. Possibly, never to return. Double yikes.

I went to my 404 page, and it was bland. So to customize it, I…

Dude. Seriously. Let me finish the story.

Bland

Image: jason carlin via Flickr, Creative Commons

I mean, chicken-soup-with-no-celery-or-pepper bland. Kinda like this one.

Nothing too wrong with that, I thought.

But then, I thought again, surely there’s a better way to showcase one’s 404 page?

So I poked around on Twitter

asking if anyone had seen cool 404 pages they could point me to.

Shannon Paul pointed me to blippy’s 404 page, Howard Riefs to that of the New Yorker, and Andi Narvaez to not one, but 36 cool custom error pages on the dzine blog.

OK. So now I knew that 404 pages didn’t have to put you to sleep.

The only problem was, how did I go about creating one?

You see, I’m not exactly techno-Einstein.

Digging into DoshDosh

What I am good at doing, though, is digging.

Probably the best resource I found, as I dug, was the one from DoshDosh on customizing your 404 error page.

But here was where I got stuck. DoshDosh says:

It’s really dead simple. While in your dashboard, click on the Presentation tab and then select Theme Editor. After which, click on the 404 Template button and you’re in.

You can basically add anything you want to this template.. just make sure that you include an error message right at top so people know that the page they were looking for isn’t there anymore.

For Lady Non-Techno-Einstein, the words “add anything you want to this template” strike fear into the belly of the beast.

Panic stations!

Just where am I supposed to “add anything I want” to the template?

I mean, I can navigate my way around basic HTML – somewhere a demon is guffawing – but I am petrified, I mean stone-cold-petrified of inadvertently breaking some piece of code and, by association, the blog.

As I leaned on my shovel, it came to me.

So here you go.

Five easy steps to customizing your 404 page, assuming you’re using WordPress (you in Blogger, or something, I ain’t got nothing for you).

1. Figure out what you want your error page to say.

Personalizing it is a given, and you could, as DoshDosh suggests, put up some of your popular posts (or posts you want people to read), ask them to subscribe, try to monetize it… whatever.

2. Write a new post.

This should contain all the content, links, and/or images you want.

Save it as a draft, and tinker around with your “kitchen sink” until it looks the way you want it to (so make sure you preview the post until you’re satisfied with it).

I tried to make mine fun, included an image (you know how I love pretty pictures) with the appropriate credit, and embedded a video.

Reminder: do not publish this! Save it as a draft!

3. Switch to the HTML view of your post.

Select all the content, and hit “copy.” If you’re really obsessive, save it to your desktop (or wherever you hide your treasure), so that you have it handy.

4. In your dashboard’s “Appearance” menu, go to your Editor.

Click on the “404 Template” link on the right (it’ll have “404.php” underneath it), and pull out your magnifying glass.

Look for the current content of your 404 page.

For example, if your error page reads, “Sorry, you were looking for something that’s not here,” look for those exact words and select them.

And nothing else.

5. Paste your new content in exactly that place.

After you do this, don’t forget to type in the new title of the page (e.g. mine is “Houston, We Have a Problem”) in between the h1 tags.

They’ll look something like this:

<h1> blah blah blah </h1><br />

Just to be very clear, that “blah blah blah” is where you type your new headline.

Finally, hit “update file” at the bottom of that page.

Now, when you refresh your blog, check your error page. Your shiny new content should be winking right back at you.

See? Easy.

I also found WordPress’ Codex instructions helpful, but got stuck at about the same Lady Non-Techno-Einstein part as I did on DoshDosh.

So, there you have it.

Customizing your 404 Error Page in 5 Easy Steps.

Tra la! Happy dance!

Oh, and a bonus tip.

Hang on to your draft error page (you know, the one you haven’t published as a post). It’ll be much easier to tweak your content there, and then go through the rest of the steps, if you ever want to change your 404 page.

Will you let me know if this post was helpful? Any further tips?