The Essential Guide to WordPress 404 Pages

WordPress, like most other content management systems, serves up website content from a database when it is requested by a browser. In the event that this content can’t be found in the database, either because it’s deleted or because it was never there in the first place, instead the user will see a 404 error page.

404 pages are by nature a bit frustrating for the user – after all you’ve clicked a link expecting to be taken to a certain page and now all you’ve reached is a dead end. However with a little careful thought you can make these pages more useful to your users, or at least entertain them a little before they click the back button.

What is a 404 Error Page?

404 error messages are returned by the server to indicate that the client was able to communicate with the server but the page you were requesting couldn’t be found.

There may be several reasons for this:

  • A deleted page or page that has been temporarily removed or moved
  • Broken or mistyped link or incorrectly inputted URL
  • Blocked or password-protected content
  • Incorrect permissions set on the server
  • .htaccess errors
  • Incorrectly configured SSL certificate
  • Filtering or blocking of site by software or ISP

How to Deal with 404 Error Pages

When a user hits a 404 page, it can be quite annoying and they may well just hit the back button or leave the site entirely. This will increase your overall site bounce rate and can impact negatively on Google search rankings, as well as contributing to a poor user experience overall.

To avoid this, rather than simply showing a 404 error page, you might want to automatically redirect the user to your homepage or another page on your site.

The easiest way to do this is by editing your .htaccess file. Add the following line of code:

ErrorDocument 404 /index.php

This will redirect users to your homepage but you could also send them to a custom 404 error page or another page on your site.

Another option is to create your own custom 404 error page that is more helpful to the user. This avoids forcing the user to be redirected to another page than the one they’d intended and can help them to find the content they originally requested.

Designing a Custom 404 Error Page

There are various points you should consider when creating your 404 page and it’s up to you to decide what information will serve your particular website users best.

#1. Inform The User The Page Can’t be Found

You can keep this formal and business-like with a message like “We’re sorry this page is not available”, or you could be more humorous if it suits the tone of your website and try something like “Oh no! Something went wrong and we couldn’t load this page. Sorry :(”

#2. Provide Navigation to the Rest of Your Site

It’s not a good idea for your 404 page to be a dead end, no matter how good it looks. If you make sure your main menu is included on the error page as it is on every other page, users can navigate directly to where they want to go, rather than just getting a link to your homepage.

#3. Suggest Other Content

You could even use your 404 page as an opportunity to direct users to your most useful or popular content as a list of articles, or a list of your site categories or archives.

#4. Display a Search Box

Search functionality is by far the most useful thing you can include on a 404 page. This makes it possible for the user to search for the content they originally hoped to view, and with any luck find it at a different location.

#5. Make the Page Look Like Part of Your Site

Default error messages are ugly and very off-putting for users. You should make an effort to style your 404 error pages to look like the rest of your site in terms of color scheme, logo, and main navigation. This helps the user to feel like they are still on your site rather than as if they’ve dropped off it entirely.

Useful WordPress 404 Error Plugins

Luckily WordPress users have the option not to mess around with code and custom page creation, as there are some great plugins that can do all the hard work for you:

404 to 301

The 404 to 301 plugin logs all 404 error messages for you (and sends an optional email to alert you of the error) and turns them into 301 redirects. This automatically sends the user to a different page and is also helps with SEO as search engines also frown on too many 404 errors.

404 to 301 plugin

404Page

The 404Page plugin helps you to create your own smart custom 404 page from a custom page template. This is a good option if you don’t want to redirect users to another page.

404Page plugin

All 404 Redirect to Homepage

If you simply want to send all users to your site homepage instead of displaying an error, the All 404 Redirect to Homepage plugin is the simplest way to achieve that. There are no complicated configuration options or anything to set up. There’s also an error dashboard showing how many times the 404 error is occurring and which pages are causing it.

404 redirect to homepage plugin

Redirection

Sometimes you might not want to redirect all 404 pages to the same place, and this is where the Redirection plugin can be very helpful. Redirection monitors 404 errors and adds them to a dashboard where you can setup an individual redirection URL for each error.

Redirection methods can also be customized based on the login status or referrer. The plugin also automatically creates a 301 redirection when you change the URL of a post and provides full logs and statistics for review.

Redirection plugin

Fancy Coming Soon

If design is important to you, you’ll want to look into the Fancy Coming Soon plugin, which can help you to effortlessly create some very beautiful 404 error pages with the option to add custom redirects.

forty four plugin

Creative 404 Pages From Around the Web

If you’d like to try your hand at designing your own custom 404 error page, you can draw some inspiration from these examples that are both attractive and useful:

Fitbit

Fitbit 404

Health tracker Fitbit keeps all the main navigation of the site and also adds a search bar and link to support. The rock climber graphic is in keeping with the sporty theme of the brand.

Modcloth

Modcloth 404

Fashion retailer Modcloth goes for a dating-app style interface that aims to match you with your perfect outfit. You can also click through the main navigation to any other part of the site.

Mashable

Mashable 404

Mashable chooses a humor angle that fits with the tone of the site. A search box and main navigation are also included.

Lego

Lego 404

Lego is a playful brand so it’s not surprising to find a creative 404 page. They keep things simple with a single link to the homepage but the website main navigation is also available.

Dreamhost

Dreamhost 404

Hosting company Dreamhost go for an animated video background that shows the company has a sense of humor.

Bloomberg

Bloomberg 404

Bloomberg is usually a pretty corporate site but they show they can still laugh at themselves with this animated 404 error page showing a businessman smashing his computer off the desk before he explodes himself.

Airbnb

Airbnb 404

Airbnb adds a cute animation to their 404 page, along with some helpful links to other pages on the site.

NPR

NPR 404

NPR’s 404 page is simple but also useful and entertaining. As well as providing some helpful links it also links the user to some interesting stories about famous missing people and things.

Blizzard Entertainment

Blizzard Entertainment 404

Instead of apologizing for not being able to serve up the page, Blizzard Entertainment jokes with the user that they have broken the website with broken glass images and the main website menu fallen down the page.

Github

Github 404

Github plays on a Star Wars theme to create an amusing 404 error page with the message “This is not the web page you are looking for. A search bar is provided to help the user find where they wanted to go.

Hotdot

Hotdot 404

Web development company Hotdot allows the user to interact with the 404 message by clicking on the glowing lights that make up the numbers to pop them. This is a good way of demonstrating the talents of the developer as well as providing an attractive 404 error page.

Emailcenter

Emailcenter 404

Emailcenter’s entertaining 404 page allows the user to choose a team member to be fired.

404 Error Pages Summary

Missing or broken web pages are never an ideal situation but with some careful planning they can be an opportunity to connect with the user and reinforce the brand message and the skills of the company or individual that owns the site.

While 404 pages can be fun, they’re best avoided if possible so it’s a good idea to audit your WordPress site for broken links regularly so you can fix any mistyped links and re-direct pages that have moved. There are various plugins like Broken Link Checker that can help you do this.

If you’ve seen any funny, creative, or innovative 404 pages apart from the ones listed here, feel free to list them in the comments. We hope you enjoyed our article on best 404 pages. If you did, you may want to see our article on best WordPress plugins.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.