How to Create a Custom 404 Page in WordPress

When browsing a website, few things are more frustrating than landing on a screen with a 404, “Page Not Found” error.

This issue could cause a user to leave your website quickly.

To avoid this, you can ensure that the links from your internal pages are correct and working.

But what if someone enters the wrong URL or the slug for one of the page links changes?

Unfortunately, it is inevitable that users will end up stumbling across a non-existent URL.

However, you can take steps to help people get back to the page they were looking for so they don’t bounce off your website.

Why do I need a 404 page?

One way to prevent users from wandering off and instead create a positive user experience is to add a custom 404 page to your website.

This allows you to provide a bit of character and personality, maybe even humor, to your site and a link to get them back on track.

Additionally, you can add links to other popular pages, such as blogs, or link them to a form if they want to report the bad login that took them to the 404 page.

You might be tempted to have a 404 error instance link to your homepage instead of a custom error page.

This can confuse the user as they may not realize they had an incorrect URL as it still ends up on the homepage.

Redirecting users to the homepage can also affect your SEO, as Google always considers this redirect as a soft-404 error.

According to Google, redirecting 404 links to your homepage will be a problem. Website owners should always focus on creating user-friendly 404 pages.

Setting up a custom 404 page

Depending on the WordPress theme, you have a few options to take advantage of a custom 404 page.

Using a plugin to create a custom 404 page should work well with any up-to-date theme.

Classic WordPress Themes and Block Editor Themes

Option 1: Use the 404.php theme

Screenshot of the WordPress dashboard, September 2022

If you are comfortable with your website’s PHP files, many themes will already have a template for a 404 page.

  • Step 1: Go to Appearance > Theme file editor in the WordPress dashboard.
  • Walk 2: Select your theme from the drop-down menu and find the 404.php file.
  • Step 3:Ideally, you’ll want to copy the 404.php to your child theme so you don’t lose your work with theme updates.
  • Step 4: Customize the text and add an image or other elements to make it your own.
  • Step 5: Press ‘Update File’ to save your changes.

Option 2: copy a 404.php file

Some themes may not include a 404.php file. If so, you can copy a 404.php file from a different theme, such as Twenty-Twenty, along with a 404.php file.

This may require some tweaking to match your theme, but you can customize the 404.php file and save it to your theme folder.

  • Step 1: Find a theme with a 404 page that you would like to use.
  • Walk 2: Navigate to the theme folder for this theme and make a copy of the 404.php file.
  • Walk 3: Move the copy to the theme folder of the theme or child theme used by your site, making sure it is called 404.php.
  • Walk 4: Check the 404 page on the front-end of your site to make sure everything is showing up as expected.
  • Walk 5: You can follow the same steps as above to make changes to the file in the theme file editor and press Update file to save your changes.

Option 3: copy the Index.php file

If your theme does not include a 404.php file, this is another alternative to creating one.

  • Walk 1: You will need to duplicate the index.php file.
  • Walk 2: Rename duplicate 404.php
  • Walk 3: Delete the code used to display messages.
  • Walk 4: Customize the text and add an image or other elements to make it your own.
  • Walk 5: Hit Update file to save your changes.

You’ll need some knowledge of PHP and HTML, but this option means the 404 page will match your current theme, so it’s a bit cleaner than using a 404 page from a different theme.

Create a 404 page in a page builder

If you use a WordPress page builder such as Elementor, Divi, Beaver Builder or Oxygen, you have the option in your builder’s interface to add a 404 page.

You should consult your preferred builder’s documentation for details on where you can adjust settings to redirect bad URLs to your custom 404 page.

Use a 404 page WordPress plugin

An easy way to add a custom 404 page to any WordPress site is to use a WordPress 404 page plugin.

404 page pluginScreenshot from WordPress.org, September 2022

These plugins will let you design the custom 404 page and track 404 errors. Some popular 404 page plugins include:

404page – your smart custom 404 error page – This is an extremely simple 404 page plugin that you can use for free. Create a new WordPress page that you want to use as a custom 404 page. To set this as your custom 404 page, navigate to “Appearance” in your WordPress dashboard, then navigate to “404 Error Page” and select the page you created, becoming the default 404 page.

SeedProd – This WordPress plugin lets you create beautiful, lightweight, custom 404 page templates that you can use on your website.

SeedProdComment PluginScreenshot from WordPress.org, September 2022

Colorlib 404 Customizer – This free WordPress plugin uses the Live Customizer to easily create a custom 404 page that matches the look of your site.

The settings appear in your WordPress dashboard under Appearance > Personalize and allow you to add additional CSS to further customize your 404 page.

Colorlib Customization Module 404Screenshot from WordPress.org, September 2022

Custom 404 Pro – This WordPress plugin allows you to create a custom 404 page in the Pages section of the WordPress admin dashboard. Additionally, it will allow you to track instances of entered URLs that triggered the 404 page so you can monitor broken links.

Custom 404 Pro pluginScreenshot from WordPress.org, September 2022

Full site edition

If you are using a WordPress full site editor theme, creating a custom 404 page is easier than ever. Follow the next steps to create a custom 404 page for your WordPress website.

ESF 2022 Theme TemplatesScreenshot of the WordPress dashboard, September 2022

It will automatically redirect if someone tries to access a non-existent page.

  • Step 1: In the WordPress dashboard, click on Appearance, then go to “editor”.
  • 2nd step: Under Editor, select Models.
  • Step 3: Select model 404.
  • Walk 4: Use the block editor to create your custom 404 page and press to safeguard.
  • Walk 5: Hit to safeguard again to save the model.
Model FSE Save 404Screenshot of the WordPress dashboard, September 2022

WordPress Custom 404 Pages

A broken link or incorrect URL doesn’t have to be a disaster.

You can make your 404 error page fun and keep the user engaged by providing a link to your home page or another page of interest on your website.

Creating a custom 404 page in WordPress is easier than ever and should not be overlooked as it improves user experience.

This page also lets you know when visitors find your 404 page so you can fix links or redirect pages where appropriate.

If you want to see some creative 404 pages, go to some of your favorite sites, type in their URLs, and add a page that you know doesn’t exist until the end.

You are sure to have great ideas for your own 404 pages!

More resources:


Featured Image: apghedia/Shutterstock

Comments are closed.