How to Create a 404 Page in WordPress

numbers 404 which means website not found, there's a plants on the number zero and a cartoon background on it.

Page not found. The dreaded 404 error annoys visitors and flummoxes web admins. Fortunately, creating a 404 page in WordPress is simple and can create a better user experience when someone stumbles upon a bad link. 

In this post, we’ll cover why you need a 404 page, look at some superb examples of custom 404 pages, and break down the options for creating a 404 page in WordPress. 

Why You Need a Custom 404 Page in WordPress

When someone tries to visit your website and the page they’re looking for can’t be found, your server returns a 404 code. Every website experiences 404 errors. 

Common reasons people land on a 404 page include:

  • Misspelling or typing error in the URL
  • The web server is down
  • The page moved, or you changed the URL
  • You deleted the page
  • The page or post never existed

You can prevent some 404 errors by setting up redirects if you move or delete a post or page, but you can’t control what visitors type in their address bar. Some 404 errors are unavoidable, making a 404 page an essential part of your website’s structure

Most WordPress and WooCommerce themes include a default 404 page with a simple message saying, “This page cannot be found.” Creating a custom 404 page improves the user experience. A well-designed 404 page eases the frustration of not finding the page the user wanted. 

Elements of a good 404 page include:

  • Branded Message. Apologize with flair. “Sorry, page not found” sounds like a robot wrote it. Humanize the error message. Rewrite it in your brand voice. If you can make customers smile or laugh, they’re more likely to forgive the negative experience. 
  • Navigation. Include navigation options to help users find the information they’re seeking. 
  • Search. In addition to navigation links, a search box helps users find specific posts or products. Adding search to a 404 page can help ecommerce websites redirect visitors to product pages. 
  • Analytics. Set up your web analytics to track 404 errors, so you can identify and correct any issues such as broken links. 

Examples of Custom 404 Pages

Now that we’ve covered why you need a custom 404 page and what goes into one, let’s check out some examples of companies that built stellar 404 pages. 

Wendy’s

Source: https://www.wendys.com/404

Would you expect anything less from the queen of Twitter sass? Wendy’s 404 page includes an interactive game themed around their primary product: hamburgers.

Disney

Source: https://disneyworld.disney.go.com/404/

Disney incorporates some of their beloved characters into their 404 pages. Stitch takes the blame for eating pages on the Walt Disney World website seen above, while Wreck-It Ralph punches through the main Disney website 404 page. The search bar next to KnowsMore, also from the film “Ralph Breaks the Internet,” rounds out this fun and functional 404 page. 

https://www.disney.com/404

HubSpot

Source: https://www.hubspot.com/404

HubSpot’s 404 page combines humor with links to help visitors find relevant content. They structured their 404 page around three of their primary web visitors:

  1. People looking for product information about their software
  2. People looking for marketing tips and news
  3. People looking online marketing courses

Southwest

Source: https://www.southwest.com/404

What Southwest’s 404 page lacks in features, it makes up for in humor. The Paige pun matches the airline’s approachable and fun style. 

Moz

Site: https://moz.com/404

Moz’s use of the brand’s robot mascot, Roger, and simplicity create an excellent 404 page. The search box is front and center, directing visitors to find the content they need. 

A cartoon man holding his laptop, sitting and looking on a bigger monitor while doing some webpage development

How to Create a 404 Page in WordPress

When creating a 404 page in WordPress, you have the option to do it manually or use a plugin. We’ll review how to do both. 

Building Manual 404 Pages

Manually creating a 404 page in WordPress requires coding skills. If you’re not comfortable directly editing the code for your site, you’ll want to skip to the next option. 

Steps to Manually Create a 404 Page in WordPress:

  1. Log in to your WordPress admin. 
  2. Navigate to the “Appearance” and click “Editor.”
  3. Open the “404.php” file from the list of theme files on the right side of the page. 
  4. Update the page code and save your changes. 

Using a Plugin for 404 Pages

Plugins allow you to build custom 404 pages in WordPress without editing your theme’s code. If you’re a technical novice or just want to save time, plugins could be the way to go. All you need to do is install and activate your plugin. Then follow the plugin’s documentation for setting up your 404 page. 

Many page-building tools like Elementor and Divi also include built-in options for creating custom 404 pages. 

Getting Help with a 404 Page in WordPress

If the thought of editing your theme’s code frightens you, the Mindsize team can help. We’re WordPress and ecommerce experts. We can help you implement an awesome 404 page while also doing the technical work to fix site issues and set up redirects to decrease the frequency of 404 errors on your site. Contact us today to learn more about our WordPress development services.