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
2. Catalyst Studios
3. Jamie Huskisson
4. 45royale Inc.
5. Carsonified
6. CSS Tricks
7. Techkultura
8. Inspiration Bit
9. Catswhocode
10. Ba.pe
11. Cut and Taste
12. CSS Remix
13. Ateaseweb
14. Koller Media
15. Expansion Broadcast
16. Function
17. Retard Zone
18. Kidmondo
19. Devlounge
20. Chris Jennings
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.
