NOTE

You are using services from SemrushTooolz.com .
If you are here from another website, Please let us know.

How to Create a Custom 404 Page in WordPress (+ Examples)

How to Create a Custom 404 Page in WordPress (+ Examples)

Dana Nicole

Apr 29, 20247 min read
Contributors: Chris Hanna and Boris Mustapic
Custom 404 Page Wordpress
Share

TABLE OF CONTENTS

404 pages show when users try to access resources that don’t exist.

Like a misspelled URL. 

Or a page that was deleted.

And you can create a custom 404 page in WordPress (even if you can’t code).

Why You Need a Custom 404 Page in WordPress

Custom 404 pages can improve the user experience by helping users find what they need. 

And you can tailor your 404 page to reflect your brand. Through elements like personalized copy and imagery. 

Take this default 404 page:

Server error page with message "not found." The requested URL /example.html was not found on this server.

This page is unhelpful. And doesn’t point users in the right direction through elements like useful links. Or a site search box. 

This might cause people to leave your site and go elsewhere. Which can drive up bounce rates.

The solution?

Create a custom 404 page that reflects your brand. And helps users move through your site with ease.

How to Create a Custom 404 Page in WordPress

Here are three methods to make your own 404 page in WordPress:

Option 1: Theme File Editor

Many WordPress themes come with a premade 404 page. 

However, if you’re not comfortable working in PHP—a scripting language—consider another option to build your 404 page. Like a page builder.

But if you do want to go this route, you can edit your premade 404 page using your theme file editor. WordPress’s theme file editor is a text editor that lets you edit files for your site’s theme. 

To do this, log into your site. Click “Appearance” and “Theme File Editor.”

WordPress Appearance menu showing the Theme File Editor.

Your theme file editor contains a drop-down where you can select which theme you’d like to edit. 

It also contains your theme’s files and a text box with each file’s code.

WordPress theme file editor screen for the GeneratePress theme

Changes you make through your child theme remain even when you update your parent theme. So, create a child theme to keep any changes to your 404 page.

You can use plugins like the Child Theme Configurator to create a child theme in a few clicks. Or follow WordPress’s instructions to create a child theme without a plugin. 

Once you have a child theme, use an FTP client or your web host’s file manager to add files to your child theme.

The following tutorial will show you how to add files with your site’s file manager.

To start, log in to your host and locate your file manager.

Web host file manager interface.

Find your 404 page file. It will likely be under your root folder (often named “/” or “public_html”). Then go to “wp-content” > “themes” > “your theme.” 

Our example has two 404 page files:

  • A file named 404.php for the overall format of the 404 page
  • A file named content-404.php that includes the content of the 404 page (like text and images)
Web host file manager screen showing 404.php and content-404.php files.

For our example, we’ll make a copy of the content-404.php file. To edit the text and imagery for this page.

Double click this to open your 404 page file. 

Then copy the contents into a plain text editor. Like a notepad app on your computer.

Next, click your child theme’s folder and create a new file within it. Name this file the same name as your 404 page (in our case, “content-404.php”).

Then, paste the code from your plain text editor into your new file, and click save. 

Web host file manager showing a child theme

Next, edit the contents of your 404 page. 

For example, we could change the highlighted text (below) to something that’s more aligned with our brand voice.

Web host file manager editor for child theme content-404.php file.

After saving your changes, your custom 404 page should now display when someone tries to access a page that doesn’t exist.

Option 2: Page Builder

Page builders like Elementor, Beaver Builder, and Divi Builder are no-code solutions for building a custom 404 page. 

While page builders often have free options, you may need to upgrade to the paid version to build a custom 404 page.

Here’s how to make a custom 404 page with Elementor.

First, install and activate Elementor Pro.

Click “Templates” and “Theme Builder.”

WordPress side menu showing option for Theme Builder.

Then click the “Add new” button.

A window will pop up. Select “Error 404” from the drop-down, and give your template a name. Click “Create Template.”

Elementor Pro template creation screen showing the option to create a custom 404 page.

You can select from premade templates. Or design one from scratch.

Elementor template library for 404 pages.

Add elements like text, imagery, and a site search box to your 404 page. So your users can easily navigate elsewhere.

Publish your page when you’re ready. Make sure the “Include” drop-down says “404 Page.” Then click “Save & Close.”

Elementor template publish screen for 404 page.

Your custom 404 page will now display when someone lands on a URL that doesn’t exist.

Option 3: 404 Page Plugin

Plugins are another option to create a custom WordPress 404 page without code.

Some plugins to consider are 404page (also listed as “Smart Custom 404”) and Colorlib 404 Customizer.

We’ll use the 404page plugin for our example.

Install and activate the plugin. Then create your 404 error page by clicking “Pages” > “Add New Page.”

WordPress Pages side menu with the option to Add New Page.

Make your page using your page builder. We’ve made the error page below with Gutenberg, WordPress’s native page builder. 

Update the URL slug—the last part of the URL—to something like “404.” 

WordPress Gutenberg editor for a custom 404 page.

Publish your page. Then click “Appearance” and “404 Error Page.”

WordPress Appearance menu showing the 404 Error Page option from the 404 page plugin.

Head into the “General” tab and select your 404 page from the drop-down. Click “Save Changes.”

404 page WordPress plugin settings interface.

Your website will now load your custom 404 page when someone navigates to a page that doesn’t exist.

Custom 404 Page Examples

Here are four custom 404 error page examples to inspire your own:

Netflix

Netflix tailors their 404 page to popular shows with an image in the background. Which helps them promote their product while directing users to their homepage.

Netflix 404 page.

Wendy’s

Wendy’s includes a simple game on their 404 page. Which adds a bit of fun to a page that is otherwise frustrating to land on. 

Plus, this 404 page has links directly below the game. To help users find what they need.

Wendy's 404 page.

Ryanair

Ryanair leans on their travel-based brand for their 404 page with a relevant image background. They also include links to help users continue along their journey.

Ryanair 404 page.

Cadbury

Cadbury includes links to their homepage on their 404 page, along with a playful, relevant “Oh, Crumbs!” message. And encourages users to reach out to let them know if they continue to encounter issues.

Cadbury 404 page.

Best Practices for 404 Pages

These tips will help you craft up a great 404 page for your site. Improving the user experience and potentially reducing bounce rates.

Explain What Happened

A quick explanation helps users understand why they got an error. So they can troubleshoot on their own.

For example, Microsoft's 404 page explains that the URL may be misspelled or the page no longer exists:

Microsoft 404 page.

Stay on Brand

Your 404 page shouldn’t feel disjointed from your website. So, inject your brand and personality into your 404 page.

Tripadvisor uses clever language that reflects their brand on their 404 page:

Tripadvisor 404 page.

Help Users Find What They Need

Keep users flowing through your site by adding elements like a search bar to your custom 404 page. Or links to popular pages. Or links to your top products.

This way, users can carry on with their journey.

Amazon includes a search bar and a link to their homepage within their 404 page (along with an image of one of many possible dogs):

Amazon 404 page.

How to Check Your Website for 404 Errors

Use Semrush’s Site Audit to check—and monitor—your site for unwanted 404 errors.

Open Site Audit, enter your domain, and click “Start Audit.” 

Site Audit interface with “yourdomain.com” entered.

Configure the site audit. (Our configuration guide can help if you get stuck.) Click “Start Site Audit” when you’re ready.

Site Audit settings configuration screen.

You’ll then get a report outlining your site’s health along with an overview of issues, warnings, and notices. 

Inside the report click “Issues.”

Site Audit overview tab showing Site Health and the number of errors, warnings, and notices.

Under “Errors” look for “# pages returned 4XX status code.” Click the “# pages” part to view which pages on your site show a 4XX error. 

Site Audit issues tab showing 84 pages return 4XX status codes.

Look for pages with a 404 error. Click “View broken links” to see which pages link to the page with the 404 error.

Site Audit results for pages that returned 4XX status code.

Remove or change these broken links to another relevant (and working) link. So that people don’t end up on a 404 page when they click them. And so search engines don’t encounter potential crawl errors.

Site Audit results for broken links and 404 errors.

Then, decide how you’d like to approach the page with the 404 error. You have two options:

Leave the Error

404 errors can be useful. As they indicate that certain pages no longer exist. And you might want to communicate this to users. 

For example, say you deleted a product page because you no longer sell that product. You’d want to leave the 404 error so users know the product’s page no longer exists.

Redirect Traffic to a New Page

Redirects—like a 301 permanent redirect—can automatically send users from one page to another when they access a link. You might do this if you replaced a page with a new one. And you want to direct users from the old page to the new page. 

Imagine you changed your about page from example.com/about to example.com/about-us. You’d likely want to redirect traffic from /about to /about-us. Because the page still exists, but it has moved. And so you wouldn't want to keep the 404 page.

Improve Your Website Experience with a Custom 404 Page

Create a custom 404 page to help users find what they need without any roadblocks.

Then, use Semrush’s Site Audit tool to monitor your 404 errors. And ensure that users don’t get stuck while browsing your site.

Try Site Audit for free today.

Share
Author Photo
Dana holds a Bachelor of Business Administration with a major in Marketing and specializes in content writing, copywriting, and SEO strategy. She has over 10+ years of experience helping established organizations within their marketing departments and currently partners with B2B providers to develop content strategies and craft persuasive copy that delights and converts.
More on this