Custom 404 pages for WordPress theme

Recently I customized the 404 page of this blog (Read my post titled ‘dealing with page not found errors‘ to understand what a 404 page is all about). It is neither the best nor final version yet but I thought of writing this little post about the process of setting up a custom 404 page on a WordPress blog and some examples of 404 pages.

custom-404-pageMost of the professional WordPress themes will have their own 404 pages. In most cases, the 404 page is represented by the 404.php file in your theme folder. Hence, customizing your 404 error message is all about editing this file and adding relevant messages or content there. If this file doesn’t exist, you can just create one.

You could customize your 404 page either via directly editing the 404.php in your theme editor or by using a number of free 404 plugins available out there.

Good 404 page ideas

Throwing an ordinary ‘Page not found’ page is like handing a tight slap on the visitor’s face because they reached your blog expecting something but they cant’ see anything. Hence it is very important to customize this page and if properly implemented, it can result in good conversion and readership as well.

The following are some of the great examples of custom 404 pages based on the content that it displays.

#1 Sell your services on 404

Ebay, DELL and HostGator have implemented exceptional 404 pages on their site where they sell their services using these bounced web hits. Checkout:

Ebay 404 page
HostGator 404 page
DELL 404 page

These are very high volume sites and they will have several thousand 404 hits everyday. Just imagine the situation where even 1% of it resulting in a sale or a lead.

#2 Show blog archives or sitemap

I like the simple 404 page that Daniel Scocco has put together. It just shows the blog archives. Similarly one could decide to show the sitemap, as well.

DailyBlogTips 404 page

#3 Show multiple options including search, most read content etc

The ProBlogger’s 404 page is one of the best examples of a blog 404 page which summarizes his best categories, a search option and a very polite ‘sorry’ message all put together very nicely.

ProBlogger 404 page

#4 Sell your brand

The PhotoBucket 404 page is just about photo categories – of course there is a 404 message and a search option but the 404 hit moves immediately to the images shown there. Of course they have the advantage of being in the photo niche.

PhotoBucket 404 page

#5 Automatic redirect to Homepage

I could not find an example for this option but it is definitely something that can be done. Ideally, it is better to display a message (something like ‘in five seconds you will be redirected’ etc) before the redirect takes place.

There could be other great examples of 404 implementations as well.

Bad examples of 404 pages

The following are some of the bad examples of 404 pages, which do not show anything useful.

John Chow’s 404 page (Nothing more than the error message)

SAP’s 404 page (Too much courtesy and blaming the technology)

twitter’s 404 page (Can’t the imagine anything other than that silly bird?)

Lufthansa’s 404 page (Giving the wrong message to the user that he has to go to a new address without specifying which)

Default thesis theme 404 page (Most of the thesis fans are still having this ugly geeky 404 message. Check out ShoutMeLoud’s post to customize your thesis 404 page)

What about you?

Do you have a cool 404 page idea (either your own or seen elsewhere)? If so please talk about the same in your comments.

Happy Blogging!

Comments

  1. Hey Ajith
    Very useful post. Adding my 2 cents to it.
    404 pages are like one way page, either you can make those reader a regular readers or you can say bye bye from 404 pages..
    Customizing 404 pages have a great impact from a blogger point of view..
    Moreover I will recommend keep checking Google webmaster tool to check for 404 error pages and do a 301 perma redirection accordingly…

  2. Great idea to share all these :) I shared 49 most used 404 error images on my blog some time back.

  3. Check mine, It offer my achieve posts. Month-wise.

  4. Hi Ajit,
    Truly saying that your post is full of teaching potentials.

  5. Raju :

    I am using a wordpress plugin – apache 404 which uses Google search API to show the nearest possible search results. Quite an useful plugin

  6. Anwin :

    Hmm.. I have been putting off these small small things on my blog for a long time. I think it is time I start doing something about it and gain back by PR :)

  7. @Harsh, definitely one should keep his eye on the Webmaster tools for the 404 hits. I had touched upon this aspect in a recent post. Perma redirects are quite useful if a particular pattern recurs.

    @Lax, wow 49 most used 404 templates! I should take a look at it :)

    @Shanker, archives is definitely a good idea. Something like Darren’s 404 page will be even better.

    @Surender, thanks a lot for that compliment :D

    @Raju, yep, I had noticed that on your blog while writing this post. I thought it was a bit slower then? Did you find any performance issues??

    @Anwin, I checked your blog… You have a bunch of things to be done man. No meta tags, keywords and even sitemap seems to be buggy due to which you have very few indexed pages on Google. I guess, this is one reason why home PR is still low.

    Cheers all!

  8. Thanks Ajith.. I am still growing up and these tips will really help me….

  9. Nihar :

    Great post…

    I have to check my 404 page and make changes if neeeded.

  10. Just realised even my 404 s*cks :S Gonna work on that tomorrow lol.

  11. @Nihar, @Kurt, good luck with the redesign of your 404. Any smart ideas there in?

  12. Rob :

    Thanks for the tips. I need to spruce up my sites 404 page…

  13. Ajith,

    I bookmarked this article on my website-design-to-do list almost a year back just as a reminder to myself to change my default thesis theme 404 page. Finally got that done. Just thought I would drop a line and let you know. :)

  14. When designing the 404 page, you should be aware of the following:
    - users were not expecting to reach this page
    - they would be rather disappointing, cuz they have expected to view the content in interest

    So, your main job in this case is try to hold the user within your website. Keeping in mind user frustration, it’s a nice practice to:
    - use a sense of humor, joking with the users. F.e. that he found some secret place on the website. This will smooth user’s disappointment
    - provide him a clear way-out to pages that DO exist.

Trackbacks

  1. [...] Smashing Magazine(1)     :  Wanted: Your 404 Error Pages Smashing Magazine(2)     :  404 Error Pages: Reloaded DollarShower.com            :  Custom 404 pages for WordPress theme [...]

  2. [...] Custom 404 Pages for WordPress Theme – A post that provides some great ideas for what you might want to include on a custom 404 page. [...]

  3. [...] Custom 404 trang cho WordPress Ch? ?? – M?t bài mà cung c?p m?t s? ý t??ng tuy?t v?i cho nh?ng gì b?n có th? mu?n bao g?m trên m?t trang 404 tu? ch?nh. [...]

Speak Your Mind

*