Top 10+ WordPress Web Designs for 404 Error Page

16 Flares Twitter 3 Facebook 4 Google+ 9 Pin It Share 0 LinkedIn 0 Reddit 0 Filament.io 16 Flares ×

404 error page is a very important page on any blog or website. Its main purpose is to notify users that they entered the wrong page, wrong link or wrong post. In truth, no one likes to be on 404 error page. But in our hands to change it!

We present the best examples of creative 404 error pages, how-to advices and thought provoking. Do not be afraid to be creative, get inspired!

404 error page

1. CSS Tricks

csstricks 404 error page

 

2. Catswhocode

catswhocode 404 error page

3. Expansion Broadcast

expansion

4. Chris Jennings

chrisjennings

5. Retard Zone

retardzone

6. Ateaseweb

ateaseweb 404 error page

 

7. CSS Remix

cssremix

8. Carsonified

carsonified

9. Catalyst Studios

catalyst

10. Jamie Huskisson

jhuskisson

 

11. WPBeginner

wpbeginner

12. Techkultura

techkultura

 

 

As we can see, 404 error pages could be very different: creative, weird, simple, elegant and usable. While creating a 404 error page you have to remember to use all main elements: WOW-impression, creative look and usability.

Usually, when visitors land on your 404 error page, they are confused and frustrated. So you have to direct people in the right direction, but do it in the most creative way.

The main tips that you can follow while creating 404 page is:

  • Creative and Funny Image
  • List of Popular Blog Posts
  • List of Recent Blog Posts
  • List of Your Archives
  • Search Bar
  • Offer some help by giving contact information

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

How to Create a 404 Error Page in WordPress

You have 404.php file in your WP theme directory. If you don’t have such file you can create it. Now, you can add any HTML content in 404.php file, but it is better to use default parameters to make this page looks like the part of your blog/site design.

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

Now wrap around the styling HTML around it. Also, you can copy your page.php content in 404.php and add another content, it’s ok.

Here are some useful tags:

Display Archive by Months:

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

Display list of Categories:

<?php wp_list_cats(); ?>

Display Most used Tags

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

Display Recent Posts

<?php get_archives('postbypost', '17', 'custom', '<li>', '</li>'); ?>
I hope this information will be useful for you.Waiting for your thoughts and comments!

2 Thoughts on “Top 10+ WordPress Web Designs for 404 Error Page

  1. Nizam Khan on April 9, 2013 at 9:16 pm said:

    Awesome 404 error pages. Well, I mostly liked 2, 9 & 11. Thanks for sharing and tweeted 🙂

  2. Your welcome, Nizam!

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

Post Navigation

16 Flares Twitter 3 Facebook 4 Google+ 9 Pin It Share 0 LinkedIn 0 Reddit 0 Filament.io 16 Flares ×