The ultimate guide to WordPress 404 pages

Visitors may come across 404 pages on your website when the content they are requesting doesn’t exist. This is the ultimate guide to WordPress 404 pages including what they are and how to customise them.

What is a 404 error?

The computers (called servers) which serve websites to visitors sometimes run into problems. When they do, they return an error code to the browser for the user to see.

The 404 error belongs to a group of error codes called “400 errors” which are errors indicating a problem with the request. Sometimes that request is a page, a video or even an image. If the server returns any error in the 400s, this means there was a problem with retrieving the request.

How and why 404 page not found errors occur

When the server cannot find the page, image or other resource the user requested, the server returns a 404 error code. The 404 error code is simply a shortened version of saying “Not found”.

Often the problem is routed in a user miss spelling the address, or perhaps the resource has been removed from the server.

Screenshot of the Highrise Digital website 404 error page.
The 404 page on this website.

How to view your WordPress 404 error page

You can view your website’s 404 error page by simply entering a no existent URL in your browser’s address bar after the domain name. Entering a random string of characters after the initial domain name should work fine.

For example, click this link will show you the 404 error page on Google’s website:

https://google.com/404error

Screenshot of Google's 404 error page
Google's 404 error page.

You can tell that the page is a 404 error usually because of the contents of the page indicating so. However the server will also return a 404 error code to your browser. This code can be seen if you inspect the page using the developer tools.

In the network tab you will see the first request returns a 404 error, indicating the page could not be found on the server.

How does WordPress handle a 404 error?

If you are running a WordPress site, WordPress handles detecting for a 404 request and then serves the 404 template to your users.

When can 404 pages occur?

When a user enters a URL in the browser’s address bar, WordPress takes the string of text after the domain and then runs this through a series of tests (called regular expressions) to try and work out what data it should retrieve from the database.

WordPress has a series of rules, called rewrite rules that it tries to find a match for, based on the current URL being requested.
If WordPress cannot match against one of its rules, the request is marked as a 404 error as the resource cannot be found. WordPress then loads the 404.php file from the sites active theme and sends this, along with the 404 error code to the browser.

WordPress 404 after page migration

If you have migrated a page from one URL to another, for example changing the page slug after the post was published, the original URL of the post will result in a 404 error.

As the content is still available but has been permanently moved, you should redirect traffic from the old URL to the new one.

WordPress 404 after site migration

If you have migrated your site from one server to another, often, after this process your sites pages can result in 404 errors being displayed to users.

Often the reason for this is that WordPress does not have a set of rewrite rules from which to use the find the location of the current request. Remember, WordPress tries to match the request (the URL the user is requesting) to a set of rewrite rules.

The way to fix this problem is to regenerate the WordPress rewrite rules. Usually this is done by visiting the permalink settings page in WordPress which can be found in the admin area under Settings > Permalinks. Click save should regenerate the rules and remove the 404 page errors.

Screenshot of the WordPress permalinks settings page.
The permalinks settings page in the WordPress admin area.

The 404.php theme template file

Once WordPress has matched that the current request is a 404 error, it then serves the browser the 404.php template from your active theme.

Most themes should have a 404.php template included. Below you can see the current Twenty Twenty One theme template.

All themes will add different things to the 404.php template, but all should indicate in the page title that the request is a “404 error not found”.

It is worth noting that the 404 template is not an editable page in WordPress and therefore to make changes to the template requires some coding editing skills.

Code from the Twenty Twenty One WordPress theme 404.php file.
404.php theme code from the Twenty Twenty One theme.

Popular content for the WordPress 404.php template file

Most theme authors will add a search input box to the 404.php template. It makes sense, as the resource the user requested cannot be found and therefore why not provide the user with a search to try and find the resource they are looking for.

Some theme authors like to display an image representing a 404 error, to provide a little more visual interest rather than just text.

Redirecting users fro the 404 error pages

As I touched on above, there may be times when you need to redirect traffic from one page URL to another, particularly when that page has moved, still exists and has a different URL.

Is redirecting your 404 pages recommended?

This is generally seen as a very bad idea. Many sites often redirect 404 error pages to their sites homepage but this is actually a bad idea.
Yoast, the authors of the very popular WordPress SEO plugin outlines the reasons for this in an excellent blog post.

https://yoast.com/seo-anti-patterns-301-redirect-all-your-404s-to-your-homepage/

Ultimately if a resource cannot be found on your site then it should return an error. Of course if a resource has moved this is when you should redirect.

How to Fix 404 Errors in WordPress Using 301 Redirects

If you have got pages that have permanently moved then you should redirect the old page URL to the new one using a 301 redirect.

This is a redirect that tells Google to re-index the page using the new URL as well as redirecting the user.

There are a number of ways to do this with WordPress. The first, and favoured approach is to do this at a server level. This means the redirect happens before WordPress is loaded and therefore makes things much quicker.

Most hosting providers have some sort of control panel interface for adding redirects or you can do it with a server config file such as .htaccess but that tends to get a little more complicated.

You can of course go down the WordPress plugin route for redirecting URLs, and the Safe Redirect Manager plugin from 10Up would be our preferred choice.

https://wordpress.org/plugins/safe-redirect-manager/

This provides a nice and easy user interface for WordPress website managers to add redirects and set whether they should be a 301 redirect (permanently moved) or a 302 redirect (moved temporarily).

Screenshot of the Kinsta redirect tool
Most modern web hosts have a redirects tool on the server.

Why customise your 404 page?

Theme authors have to make sure that the 404 pages in their themes are going to be suitable for everyone. As a result they often lack the customisations that can provide value specific to the audience of your website.

For this reason you may want to make some customisations to your sites 404 error page to provide users with specific information.

It is a good opportunity to promote other content on your website that you think your users will benefit from reading. It is also a good opportunity to provide your users with help to try and find what they are looking for.

This article from A List Apart has some good ideas for what to include in your 404 page template.

https://alistapart.com/article/perfect404/

How to customise the WordPress 404 page

As I have mentioned it is a good idea to customise your WordPress 404 page to provide the user with as much useful information as possible.

Let’s have a look at how you can do that, depending on what you are using on your WordPress site.

How to Create a Custom 404 Page in WordPress

When WordPress decides that a user’s request is a 404 page the user is presented with the 404.php template from the active theme.

Therefore if you want to change what the user is presented with, you can edit your themes 404.php template file.

It may be beneficial to use a child theme to make changes to a template file to make sure that any theme updates don’t overwrite your changes.

Screenshot of the WordPress theme editor page in the admin area.
WordPress has a built in theme editor inside the administration screens.

To edit the 404.php file, navigation to the Appearance section of the WordPress admin area and click on the Theme Editor link.

From the list of files on the right hand side, select the active themes 404.php file. This is then presented in the editor window where you can see the contents.

It is here that you can make any changes you want, including changes the title, and messages that are output.

See below for some examples of the things you might want to add to your 404 page.

⚠️ Be extra careful when editing files inside the WordPress admin area. Mistakes could mean you are locked out of your site, and the site shows errors.

What if my active theme doesn’t have a 404.php file included?

If your active theme doesn’t have a 404.php template, then all you need to do is to create one. To do this you will need a method of putting files onto your server such as FTP or managing this through your web hosts control panel.

Create a copy of the themes index.php file and save it in your theme as 404.php. You can then make edits to this page and they will be shown when a 404 error occurs on your site.

How to Create a Custom WordPress 404 Page With Elementor, and Astra WordPress themes

Many of the popular theme and page builders that WordPress site owners use often come with their own method for customising the sites 404 error page.

Some are easier than others and below I am going to outline the method of customising the 404 page for Divi, Astra and firstly, Elemetor.

Elementor 404 page

Follow the steps below to customise the 404 page template using Elementor.

  1. In the WordPress menu on the left of the admin, select Templates and then Theme Builder
  2. In the list of tabs on this page, select the Single tab.
  3. Press the Add New Single button on this page
  4. From the template dropdown type choose Single
  5. From the Select Post Type dropdown choose 404 page
  6. Give the template a descriptive name (e.g. Custom 404), NOT starting with “404”.Click the Create Template button.
  7. You will then be presented with a list of templates to choose from. Hover over the one you want to select and click insert.

From here you can now make edits to the template, for example adding your own images, inserting page elements or changing the title and text on the page.

Astra 404 page

With Astra pro you can create a custom 404 page using the custom layouts option.

  1. From the Astra Options page under Appearance, activate the Custom Layouts module.
  2. Once activated click on the Settings link.
  3. Click Add New to create a new custom layout.
  4. This takes you to a traditional post edit screen where you can customise your 404 page with whatever page builder you are using. At the bottom of this screen in the Custom Layout Settings box, choose 404 page from the dropdown list and then save your post.

Now when users hit a 404 error page they will be presented with the new page you have just created.

How to create a custom 404 page if using Divi or the Gutenberg block editor

If your site is not using a theme or page builder that supports creating a custom 404 page template such as Divi or the default (Gutenberg) block editor, you can still customise the 404 page using the Fantastically Flexible 404s plugin.

 

What to add to your custom 404 page

Your 404 page is a good place to provide valuable information for visitors. After all, they have tried to find a resource on your site but been faced with an error. Therefore rather than just telling them something went wrong, it is a good example of providing additional information.

Some ideas for what to include on your 404 page

  • 404 page title – a sensible title to let the reader know that something has gone wrong.
  • 404 explainer text – include a paragraph to explain that it is not their fault but URL requests could not be found. Maybe add a hint to ask them to check the URL for errors.
  • Search box – as the user has not managed to land of the page they thought, a search box is a good idea to let them search for the resource on the site instead and hopefully they will find the resource or page in the results.
  • Frequently asked questions – depending on the context of your site, a list of FAQs may help the user at this point.

The Fantastically Flexible 404s WordPress plugin

If you have found yourself in the situation that your theme or page builder does not support a custom 404 page, you can use our Fantastically Flexible 404s WordPress 404 page plugin instead.

It works with any WordPress website, regardless of what theme or plugins you are using. You can create a page in WordPress just like you normally would, however you normally create pages, whether that is with a page builder or the Gutenberg block editor.

Once you have created your page, you can set this page as the sites 404 page using the plugins settings. Once you have done this, that page will be used when the user visits the non existent page.

In addition to that the plugin also:

  • Highlights which page is set as the current 404 page in the page listings screen
  • Prevents the 404 page from being indexed by Google as it sets a no-index in the page’s <head>
  • Remove the 404 page the sites XML sitemap, assuming this is being generated using the Yoast WordPress SEO plugin.
  • Caches the result of the 404 page so frequent 404s will have less load on the server (see below for an explanation of this)

Take a look at the video below which explains how to use the plugin.

  • An overview of the Fantastically Flexible 404s WordPress plugin

About the author

Mark is the lead WordPress developer at Highrise Digital. He has been working with WordPress for over 15 years, way back to 2005. He focuses on back-end development, integrating the website build with WordPress so everything can be editable.