We all work hard ensuring that every link on our site leads to an existing file. But mistakes can happen, and our visitors might land on the famous 404 Error page by following broken links to your web pages from other sites, or misspelling your URLs. Most of them will be too lazy to search for the needed information from your site, so they simply leave, and you lose them forever.

To capture their attention and make them stay on your site you need to create a custom user-friendly 404 Error page. Most web hosts would allow you to upload a custom 404 Error page, which will be displayed when someone comes to a non existent URL within your domain.

It’s very simple to do in WordPress blogs. All you have to do is edit your Theme’s 404 error template file:

  1. Go to your WordPress admin panel
  2. Click on Presentation link
  3. Click on the Theme Editor
  4. Usually, there should be a “404 Template” in the list of files, click on it
  5. Edit the error message withing the H2 heading tags and add more content if needed
  6. Update file

If your WordPress Theme does not include a template file named 404.php, you can create your own. For more instructions check WordPress manual.

For “404 Must-haves” make sure to read A List Apart article.

If you want to find out what do numbers 404 mean, check out 404Lab’s history page. To get some ideas for a perfect 404 error message for your site, make sure to check 404Lab’s area page

Finally, here are my 8 bits of inspiration for your 404 Error pages with a clever and sometimes humorous twist:

  1. Andy Rutledge
  2. mezzoblue Error 404
  3. A List Apart
  4. GreenPeace
  5. JoeK.com
  6. BlueSilver[Dot]Org
  7. Technorati: 404
  8. Apple

How original is your 404 page?

Recent Bits
Related Bits
how to get inspired
8 bits of Colour Inspirations
Fighting Spam Without Captcha
About
Apple is reinventing the phone with iPhone
Blog SEO: Are You Ready To Get More Loyal Readers?
The 5 D’z of Design
Google interviewed
Comment Bits

28 Insightful Bits in response to “Inspirational 404 Error Pages”

  1. That is an awesome list of 404 page inspiration. I’m not sure what’s worse: getting a 404 page, or getting bad poetry and a 404 page. :)

  2. ibit

    Thank you, Ronalfly. I think even a bad poetry is better than a plain 404 Error message. :-)

  3. We did this one about a year ago

    http://www.gelattina.com/404.asp

    My favrotie on your list was this one
    http://www.andyrutledge.com/404.html

  4. ibit

    nice 404 page, Romeo. Even though I don’t know Spanish, I can see that you’ve included all important links to your site on the 404 error page.

  5. Here is one more:
    http://www.sxipper.com/404

    marius

  6. ibit

    Thanks Marius – that’s a pretty cool 404 page :-)

  7. What about automatically directing your user’s request to your site’s search engine?

    On inspirationbit.com’s 404-page (http://www.inspirationbit.com/inspirational-404), you point out what the user was looking for, and beneath give him the opportunity to re-enter the term into your search input.

    So – why not cut one annoying step? And if there’s actually nothing to find, you can give him the no-search-result page (which should be very well designed, then)…

    I’m just dreaming. Didn’t make it on my own site, so far (no full-access-server-service) – but who does it right (the only one I know so far): The Rolling Stone – http://www.rollingstone.com/an.....archengine

    See You

  8. PS: this avoid-404-by-auto-searching thing should become a web standard once. don’t you think?

    I wrote some more stuff about it, in German though, but you can get it here: http://404.MiSc.at

    (You see – it’s actually possible to request any ‘subdomain’ on my site – with magic-auto-search :)) )

  9. ibit

    Yes, you’re right, MiSc, but your “magic-auto-search” is a bit more involved than a simple customization of 404 error page. However, if you post a how-to on the secrets of helpful 404 results page (e.g., how Rolling Stones site deals with 404), please, let me know.

  10. I still have this on my large to do list. Thanks for the inspiration. Its interesting what some people have done with their custom 404′s. Some of them are right on the edge of offending the visitor while being funny at the same time.

  11. ibit

    You’re welcome!
    Yes, you don’t want to offend the visitor, but some humour definitely helps :-)

  12. I’m a little late in finding this post, but I think my favorite 404 page (though I can’t remember where it was from!) is: “Oh no! You broke the internet!” I guess it’s not that original, but it always made me laugh, whenever I went to that site I can’t remember… The one from your list that I liked the most was BlueSilver’s. That one made me laugh, too.

  13. Vivien

    Glad you had some laughs out of 404. As you saw for yourself, it’s good to keep your 404 pages fun and memorable.

  14. @Lauren Marie: was it one of these?
    http://www.google.com/search?q.....net%22+404

    If they all were so funny, we should intentionally put some broken links into our blogs… which is an impossible thing if there are no broken links at all: http://MiSc.at/internet, http://rollingstone.com/internet, …

  15. Vivien

    MiSc, you better try limiting the number of links in your comments to two, otherwise my Akismet flags your comments as Spam.

    Fortunately, I’ve spotted it and Unspammed your comment :-)

  16. It has never even occurred to me to think about my 404 page! See what reading someone’s archives will tell me? Number 6 was my favorite. I think I’ll go get some coffee and think about my 404.

  17. Vivien

    Shelly, I’m so glad to see that you’re enjoying your surfing/reading time at InspirationBit. I think I need to get more coffee to keep up with all your comments today. Thank you :-)

  18. Hi Vivien,

    I’ve recently changed my 404 page (again – my habit of never being happy with my own work) and have linked to it through my name above.

    Would you have any suggestions for possible additions?

  19. Vivien

    haha, what a cute 404 page you’ve got there, David. I think you’ve addressed all the things that should be on 404 error page – you’ve kept the site navigation, the sidebar, and even linked to featured articles and contact you page.

    Do you get email notifications when someone is landing on your 404 page? Where they came from and which page is missing?

  20. @David: Well, additions…
    The problem is, your 404 page actually doesn’t look like one. It looks like a content page, with a big image, lots of text and navigation.

    So how many of your users will immediately know that it’s an error page?
    They have to read through your sorry-text, check the huge page overview on the right, and one day will find the search field in the middle of nowhere.

    The century of displaying 404s is over. Take your requests to your site’s search – and find related stuff. One step less annoying.

  21. Vivien

    MiSc, the problem is that even redirecting the request to the site’s search often doesn’t help that much – it usually results in bunch of pages that search engine thinks are related to my request, so I have to browse through all those search results and maybe find something remotely close to what I was looking for or maybe find nothing.

    I don’t think that “The century of displaying 404s is over”. It’s like coming to a store looking for a product I was thinking they had, but not finding it, however the store had so many other interesting products to offer that I end up buying those.

    @David, I think that the other thing you might need to add to your 404 is either pointing the visitor to the location of the search box, or adding another search box below the image. Also, maybe adding the numbers “404″ before saying “No walk today”, just because most people are aware of the 404 errors by now, so they’ll know they landed on one.

  22. Vivien,

    I don’t receive emails alerting me when someone hits a 404, but if you could point me in the right direction it’d be very much appreciated. That sounds like a very useful alert!

    MiSc,

    I agree with Vivien when she mentions a potential problem when users are automatically given search results. The search isn’t entirely accurate, and the user still isn’t finding exactly what they’re looking for, so that could be confusing.

    Thanks to you both for taking a look however. I’ve just changed my 404 page so the title includes ’404′ and the text refers the user to where my search box is (at the top right of the page). It’s a good idea to place a search box within the main text body, and I’ll look into that shortly.

  23. Vivien

    David, I was following the instructions on Codex WordPress page to create user-friendly error messages and get email notifications when someone lands on your page.

  24. GreenPeace has a better sales pitch on their 404 page then most people have on their homepages.

    They definitely know their priorities and how to push the message across.

  25. Vivien

    They most certainly do. Hopefully, people do get their message.

  26. I did a lot of searching when choosing to design my 404 page, and you helped with your suggestions. Thanks!

    I know I’m late (but my blog is only 3 months old).

    http://www.eroticachallenge.com/notachanceitshere

  27. You’re welcome, your 404 page is beautiful ;)
    That reminds me, after re-designing this blog, I forgot about my 404 page, so it’s on my to-do list now.

Selected Bits

PopularBits

RecommendedBits

FavouriteBits

PersonalBits

Hi, I'm Vivien. Thanks for visiting my Inspiration Bit. I often find myself scouring the internet looking for either answers to many questions I have or websites that inspire me, sites that I can learn from. On what topics you might ask — any topics that interest me, anything from web design to typography and art, from blogging to entrepreneurship, from programming to open source.
read more…
When I'm not blogging, I design web sites, teach programming, play with my daughter and try to balance family, work, friends and a somewhat active social life on