Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

Best of Best WordPress 404 Error Page Designs

Last updated on by
Follow WPBeginner on YouTube
Best of Best WordPress 404 Error Page Designs

Every single user on the web has landed on at least one 404 page in their entire user surfing experience. The truth is that the number that users land on 404 pages is significantly higher than just one. Often when a user arrive on a 404 page, they end up leaving your site thus increasing your bounce rate. High bounce rate can negatively impact your website by decreasing your revenue from advertisers and more. You can reduce the bounce rate and increase pageviews by simply optimizing your 404 Error Page. In this article, we will highlight best of best WordPress 404 Error Page Designs, and we will give you our insights on creating a beautiful and highly usable 404 page design for your WordPress.

Showcase for Inspiration

Before we show you how you can design your own 404 page design for WordPress, we will highlight some of the best 404 Error Page Designs being used on WordPress for your inspiration. The criteria we used to pick these designs were creativity and usability. Some designs have both, and some only have one aspect.

1. WPBeginner

WPBeginner's 404 Page

2. Catalyst Studios

Catalyst Studio's 404 Page

3. Jamie Huskisson

Jamie Huskisson's 404 Page

4. 45royale Inc.

45royale 404 Page

5. Carsonified

Carsonified 404 Page

6. CSS Tricks

CSS Tricks 404 Page

7. Techkultura

Techkultura 404 Page

8. Inspiration Bit

Inspiration Bit 404 Page

9. Catswhocode

Catswhocode 404 Page

10. Ba.pe

Bape 404 Page

11. Cut and Taste

Cut and Taste 404 Page

12. CSS Remix

CSS Remix 404 Page

13. Ateaseweb

Ateaseweb 404 Page

14. Koller Media

Kollermedia 404 Page

15. Expansion Broadcast

Expansion Broadcast 404 Page

16. Function

Function 404 Page

17. Retard Zone

Retard Zone 404 Page

18. Kidmondo

Kidmondo 404 Page

19. Devlounge

Devlounge 404 Page

20. Chris Jennings

Chris Jennings 404 Page

Best Practices and Lessons You Should Learn from these

In the above showcase you probably saw some 404 pages that were very creative, whereas others that were just weird but memorable, and some that were simple yet elegant and usable. When creating a 404 page you need to remember to combine all three elements: creativity, usability, and the ability to leave a lasting impression.

When creating our 404 page, we actually looked at a lot of these above to get inspiration and combine the best elements from these into one. Most of the time, when people land on the 404 page, they are frustrated. So you need to assist them in finding what they are trying to reach, but in the most creative way possible.

A good structure that you can follow is:

  • Creative Image
  • List of Popular Posts
  • List of Recent Posts
  • List of Archives
  • Search Bar
  • Offer more help by giving contact options

Now you do not need to have all of them, but you should certainly have more than two of these options in your 404 page.

Analyzing our 404 page, some people say we do not have a search bar. We have our search bar in the sidebar, so there is no reason to display it twice. We are displaying archive by month, by category, and we are displaying the popular tags. Ofcourse the creative image is to make it all look friendly rather than dull.

Now we understand that not everyone is a great artist and cannot come up with some of the illustrations and cartoons above, but you can see the Devlounge example or Function’s example above to see how simplicity can also work. Devlounge has a very organized 404 page, no image, no nothing, but it is very organized and helpful. Function has a simple icon and other resources, but nothing super graphic.

When creating your own 404 page, keep that in mind.

How to Create a 404 Page in WordPress

In your WordPress theme directory there is a file called 404.php, if you don’t have that file then you might want to create one. You can add any HTML in that file to fit your needs. But it is recommended that you use the default parameters, so the page looks like it is part of the design.

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now wrap around the styling HTML around it. If you want you can even copy your page.php content in 404.php and just remove the content area and add your customized tags.

Here are some of the tags that you can use:

Display Archive by Months:

<?php wp_get_archives('type=monthly'); ?>

This code will display archive by months, but it will list all months. So it might become a mess if you have a blog that is three years old. To learn how to limit the count of months displayed check out the tutorial.

Display list of Categories

<?php wp_list_cats(); ?>

This code will list all categories on your blog. Ofcoures you can style them however using list tags or others.

Display Most used Tags

<?php wp_tag_cloud('smallest=8&largest=12&unit=pt&number=30&format=list&order=RAND'); ?>

This will show the most used tags like how we have on our 404 page.

Display Recent Posts

<?php get_archives('postbypost', '17', 'custom', '<li>', '</li>'); ?>

There are more codes that you can use, you will just have to search the documentation and find it. If you have a specific question feel free to ask us at anytime.

Further Sources:

These lists has a lot more 404 examples. We only featured the WordPress ones.

404 Error Pages Reloaded

More 404 Pages

60 Creative 404 Page Designs


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »
  • Nure

    Just awesome i like it
    thanks to share

  • PatREllery

    Here’s a cool one: http://www.bookofzeus.com/404/

    • http://www.ehowportal.com/ Bhavesh

      @PatREllery Its really cool one…..

  • http://www.jokerpokerblog.com/music Bruce

    Thanks for this informative information. I like:

    9. Catswhocode
    17. Retard Zone

  • http://www.blogwp.de Dennis

    Nice one!
    My favourite is #6 CSS ;)
    Thanks for sharing.

  • http://ghostwhisperer.me/ penthius

    After reading this I too decided to give it a go.

    It’s my first 404 , it will get better with practice I am sure ;
    http://ghostwhisperer.me/404

  • http://netjelly.com Zach Hornsby

    After reading this article, I created one.

    http://netjelly.com/404

    • http://www.wpbeginner.com Editorial Staff

      It looks great :)

  • Viidar

    How about this one? (in Norwegian, but you´ll get the picture):
    http://www.powertech.no/404

    Text: “Ups, Mari, has been down in the server-room again…” (mari works in the finance-department ;) )

  • http://www.kaplang.com/blog Michelle

    these are really great, thanks for sharing :)

  • http://www.konuttakas.com Dave

    This page also pretty good, and very funny…
    [Link Removed because the site did not use WordPress]

    • http://www.wpbeginner.com Editorial Staff

      Except your site is not using WordPress for that 404 page.

  • http://www.flippachick.com Niche Website Builder

    Very creative indeed! Of course, my favorite has to be the 404 error pages featuring Homer Simpson and his infamous “D’Oh!”

  • http://www.gigglecomputer.com Phaoloo

    Nice examples, they inspire me for the next project.

  • http://www.kiararealty.com.my Rent Apartment in Kuala Lumpur

    Excellent collection of 404 page design!

  • http://www.383project.com Andrew Yates

    Nice collection, how about this one… http://www.383project.com/404 ?

    • http://www.wpbeginner.com Editorial Staff

      Very nice :) We will surely include it in our next collection.

  • http://www.arfandia.com arfandhia

    wow, nice colection,thanks for this list

  • http://10steps.sg Johnson Koh

    Interesting collection. Thanks for the effort :)

  • abrcity

    very nice article,very helpful

  • http://www.arifacar.net Arif

    really nice designs, thanks for sharing

  • http://zhivem-zdorovo.com Klim

    Some pages are really cool! Thanks for collecting them!

  • http://www.kamikazemusic.com Dave Sparks

    love the cats who code one, brilliant.

  • http://websitedesignuk.me/ Website Design UK

    Excellent showcase, my friend!! Well worthy of a Digg.

  • http://www.wptavern.com Jeffro

    I like the catswhocode one. Works well with the site name! hah

  • http://www.g-han.co.uk G.Han

    Beautiful post, very inspiring!

  • Hans

    I really like the illustration on Catalyst Studios’. That on Carsonified is also very nice (all of them are) :D

    I like this one to
    http://jayj.dk/404

    • http://www.wpbeginner.com Editorial Staff

      Very nice find there. That one is good.

  • http://www.honourchick.com/blog Honour Chick

    lol, very funny 404 pages.

  • http://technosiastic.wordpress.com Shahriar Hyder

    Very nice post. Please do check out the following article as well which is a compilation of:

    Custom 404 error pages that are cool, funny yet creative

    http://technosiastic.wordpress.com/2009/09/01/custom-404-error-pages-that-are-cool-funny-yet-creative/

  • http://www.roboxpress.com Asif Iqbal

    Very neat and clean options.. I am going to choone one of the best for my website.

  • http://www.ceresnieandoffenfurs.com/ Michigan Fur Coats

    Very clever and unique.

  • http://www.clickpopmedia.com vq

    I wanted to throw two of mine in there:

    http://weare.clickpopmedia.com/404
    http://www.clickpopmedia.com/404

    Both WordPress. Let me know what you think.

    • http://www.wpbeginner.com Editorial Staff

      Love your weare page. The second one can still use some work.

  • http://www.tobbis-blog.de Tobbi

    Great collection. My favorites a #2 and #6

  • http://www.healthbeautyandfitness.com/exercise-fitness/september-is-national-yoga-month.html GailGrannum

    Wow, you have really expanded my concept of the 404 page alternatives. Thank you for sharing very creative examples that will assist me in reducing my bounce rate. BTW – I have tweeted this article to my peeps.
    Gail

    • http://www.wpbeginner.com Editorial Staff

      We appreciate all the support on twitter :) If you ever have any questions or need help with WordPress feel free to ask us either via twitter or email.

  • http://www.teddy-o-ted.com Teddy

    Thanks for the showcase! I always find a lot of inspiration in 404 pages – basically, a good 404 page will have to appease the possibly frustrated user as well as make a good impression so that the visitor will continue probing the site instead of navigating away almost immediately.

    Oh, and thanks for the tutorial too! I find it very useful and detailed for those who are still new to WordPress and PHP :) awesome job!

    p/s: Some shameless self-promotion here: http://www.teddy-o-ted.com/wp-admins (to trigger a 404 page) and http://www.teddy-o-ted.com/demo/ (not strictly a 404 page but I’m thinking).

    • http://www.wpbeginner.com Editorial Staff

      Love your Hot Dog idea. Also Oh God Dammit is pretty good too. Tough choice eh.

      • http://www.teddy-o-ted.com Teddy

        Kind of a tough choice. I think I’ll most probably be porting the hot dog idea over to my main site’s 404 template, heh.

        Speaking of which, what inspired you to make the 202 + 202 = 404 title? That’s an interesting one :)

        • http://www.wpbeginner.com Editorial Staff

          The idea of WPBeginner <<< Beginner and the whole number idea because I like numbers. Simple addition.

  • werthers

    B3ta once ran a competition a long time ago for 404 images and they blew all these out of the water. One featured a map of the internet and an arrow and you are here to 404, it also had porn and the rantings of nerds among other areas.
    It’s going a long time back so I don’t know if many of the images are still hosted

  • http://www.subcorpus.net/blog/ subcorpus

    awesome …
    need to think of kewl way to do that on my blog … hehe …

  • http://sterlingfire.org j2brown

    I’m biased, since it’s my own site, but I think it’s rather creative:

    http://www.sterlingfire.org/?error=404

  • http://www.optimiced.com Michel

    Another excellent resource for 404s:

    http://simplebits.com/notebook/2007/11/03/404.html

    See all comments in this blog post by Dan! (not WP blogs) (but still the collection is impressive) :-)

  • http://www.xtraboy.com Oleg

    Yeah! Nice Ideas! I have my custom 404 Error page too: http://www.xtraboy.com/some-error

    Take a look at it. It’s funny :) Thanx ;)

    • http://www.wpbeginner.com Editorial Staff

      That is surely a memorable one. Had we known about it before, we would’ve added it. Will consider for our next showcase :)

      • http://www.xtraboy.com Oleg

        Thank You! I’m glad to hear your words :)

  • http://www.tricksdaddy.com Simran

    Awesome collection. Thanks for sharing :)

  • http://coffeevancouver.ca Robert

    Some of these are great!

    I run a coffee blog in Vancouver and I used a split coffee cup as a my 404 page.

    http://coffeevancouver.ca/error

    • http://www.wpbeginner.com Editorial Staff

      Very nice use of the image. Love your other posts.

  • Mike

    techkultura from Polish:

    404 The Way of the Samurai Codex

    “If the searched page doesn’t exist,
    Immediately fulfill Seppuku.”

  • http://www.penuliskomputer.com ilmu komputer

    they all very creative design.

    Good.

  • http://mw21593.blogspot.com/2009/08/something-may-be-you-do-not-know-about.html TalkVietnam

    Nice collection. Thanks.

  • http://chrisberryonthe.net Chris Berry

    Here’s a good WordPress example.
    http://roanoketweetup.com/404

  • http://www.lipelip.com lipelip

    Nice collection, here is mine

    http://www.lipelip.be/micou

    I’m a fan of chuck norris :)

    • http://www.wpbeginner.com Editorial Staff

      Your page is funny and good looking. Keep up the great work, and we love Chuck Norris as well.

      • http://www.lipelip.com lipelip

        héhé thanks, chuck rocks !

  • http://joyoge.com joyoge bookmark

    nice 404 designs, thanks for the tut

  • http://www.optimiced.com Michel

    Mmm, and how about this one? >

    http://www.optimiced.com/en/404

    100% WP powered, 100% custom designed;-)

    • http://mcs-strategies.com/ Thomas

      I’m pretty sure putting Adsense on a 404 error page is against Google’s terms of service, don’t you think?

      • http://www.optimiced.com Michel

        My WordPress theme uses standard templates, so the 404 page simply has a small adsense block at the top, as most of the pages of my blog have it, too. I wouldn’t worry about it, nor do I care much if this page shows (or not) adsense at all. I was showing the design of the page, not the adsense block — looks like you were looking elsewhere;-)

      • http://www.optimiced.com Michel

        Plus, if there’s content on the 404 page, Google allows to show ads on it — this is not against their TOS (this info could be useful to others, too) :)

  • http://davebowker.com Dave Bowker

    How about this one? Can’t go wrong with Oompa Loompas!

    http://quoterelish.com/err

    • http://www.wpbeginner.com Editorial Staff

      It’s good, but we only listed sites that were powered by WordPress.