File Not Found: How To Create A Custom Error 404 Page

File Not Found: How To Create A Custom Error 404 Page

Why Should I Care About Error 404 Pages?

“Error 404” occurs when a visitor tries to access a page that no longer exists. Despite best efforts to redirect and specify links to web pages on your site, your visitors can still encounter the dreaded error message. This means that your 404 page can either enhance or compromise a visitor’s experience on your domain, depending on how it is designed. Taking the time to design a user-friendly error page can make the difference between increasing and decreasing your website traffic.

If you are using WordPress, your theme will likely come with a default 404 message. You can test your error page by entering Once you have tested this page you may wish to redesign it to be more helpful or reflective of your domain. If you want to personalize your own error page without applying any programming language, there are plugins that can be added to your WordPress site. Using plugins to creating custom 404 pages allows you to alter or change your 404 page independent from the theme, which means you can keep your 404 page even after you change themes.

Designing Your Error 404 Page

A simple google search will show you that websites have increasingly made use of thoughtful and creative error 404 pages, rather than simply providing “sorry, page not found” messages. People tend to overlook designing their error page, but integrating creativity, helpful, or humorous 404 messages to your domain can not only alleviate reader frustration, but encourage them to continue using your site. I have come across several websites with funny, artistic, helpful, and interactive error pages that transform the 404 page to an entertaining and engaging experience for its viewers. Here are a few of my favourites for some inspiration:

  1. GitHub
Github Humours Users By Referencing Famous Star Wars Quote: “These Aren’t The Droids You’re Looking For”
  1. eHarmony
eHarmony Stays Relevant By Providing Users With A Band-aid For Broken Hearts and Broken Pages
  1. Airbnb
Airbnb Adresses User Frustration By Providing A List Of Helpful Links
  1. Magnet
Magnt Entertains Users By Suggesting They Are To Blame For 404 Error

How To Customize With “404 Error Page” Plugin

I enjoy scrolling through error messages on google so much that I decided to attempt creating my own error page. After locating my theme’s default 404 page, I found the default message surpringly helpful. I liked that it included a search form for visitors to attempt to locate their desired page, however, I found the error message visually plain and I wanted to make a few changes.

Default 404 Page From Hemingway Theme

I decided to use the 404 Error Page plugin because it allows you to easily create error pages by entering and saving the error message in the page editing box. Once this is saved, you can set the desired page as your 404 page from dashboard < Appearance < 404 Error Page. Unfortunately, because I removed my default 404 message, the search form was never added to my custom 404 page. I then decided to use the Search & Filter plugin to create a new search form. With this plugin, a search form can be easily created with a shortcode. You can alter the shortcode to include the search form and drop down lists for categories, tags, and dates.  You can also order this information into hierarchies to suit your preference. For the time being, I am only interested in displaying a search form, so I used the shortcode searchandfilter fields="search" to display this in my custom 404 page. Below, you will see how I created my custom 404 page from the page editing box, how I selected this page to be displayed as my official 404 page, and finally, how my 404 page apears once published.

Creating Custom Error Message With 404 Error Page Plugin
Selecting Custom Error Page with 404 Error Page Plugin
Finished Custom Error 404 Page

Adding an image to my 404 page is a simple change, but it makes the page more engaging and allows me to personalize the page to fit the rest of my site. If you are interested in customizing your own 404 page you can find more inspiration herehere, and here. Also, other suggested plugins can be found herehere and here.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.