How to Create a Custom 404 Error Page in WordPress?

While creating a custom page on WordPress is seldom an issue, a 404 Error Page still takes precedence. We all know the horror and misery of anticipating something on the internet only to find Error 404 waiting for us. Times like this require delicate maneuvering as the website, despite having a broken link, should try and remain friendly to the visitor to keep up the goodwill. And that’s where WordPress comes in. As a CMS that powers over 40% of websites worldwide, chances are you won’t be hurt learning how to create a custom 404 Error page for WordPress. Scroll down if you do!

Why do you need a Custom 404 Error page?

Despite all the apparent negativity, a custom 404 Error page can actually be a positive UX if you play your cards right. The thing about custom pages is that they are, well, custom. Thus, you can add a little character or personality, try humor, or plain old hospitality. No matter the approach, a custom 404 Error page appears more wholesome and “welcoming” than the generic monstrosity.

While you can add links to blogs, other helpful websites, or even a link to submit a diagnostic report regarding the broken link, you should avoid using the custom page to redirect traffic to your Homepage URL. It can be pretty confusing to the customer, and not only that, but it can also affect your SEO as Google strictly counts such redirects as Soft-404 errors.

Methods to Create Custom 404 Page

However, let’s not worry about that just now. Instead, it’s time to focus on how to create a custom page on WordPress. Here we go:

Method 1. Using the Theme Editor

Every WordPress Theme has its own 404 Error page template. Hence, you can use the Theme Editor to customize this page and use it with the theme applied. In order to do so, follow the steps properly:

1. On your Dashboard, navigate to Appearance.
2. Then, go to the Theme Editor.
3. You will see a long list of files on the right side of the screen, look for 404.php.
4. Open the 404.php file with your favorite text editor and make changes accordingly.
5. Finally, save the text file and close the Theme Editor.

Note – Fair Warning, the user must be somewhat knowledgeable of HTML to pull this off.

Now, what to do if your theme doesn’t carry a 404 template? Simple, you create one on your own. There are two ways to move forward. First, create a 404.php file from scratch or copy a pre-existing 404.php file and tweak it as per your need.

Option 1: Copying a 404.php file

In case your theme doesn’t come with a 404 page, try and copy it from a different theme and adjust it as per your need. Once again we have to reiterate that it needs some considerable HTML knowledge, proceed with care.

1. First, find a theme that has a 404.php file.
2. Now copy the file and paste it into your desired theme folder.
3. Make sure it still reads as 404.php.
4. Then open the file in a text editor and carry out the changes.
5. You need to remove anything that is not in line with your chosen theme and add a custom message and or image.
6. Finally, save the file.

Option 2: Creating a 404.php file

If you are well versed in HTML, you can always try to create a custom 404.php file for your theme.

1. First, you need to go to your preferred theme and copy and duplicate the index.php file.
2. After that, rename the duplicate file 404.php.
3. Now open the file for editing. You are free to use any text editor.
4. Here, remove the unnecessary parts or completely delete the whole content as per your requirement.
5. Now start writing the code for the 404 Error page or personalize the existing text, images, and other possible elements.
6. Lastly, save the file.

Method 2. Using Page Builder to create a custom Error 404 page

WordPress has multiple Page Builders to offer. If you are familiar with tools such as Elementor, Divi, Beaver Builder, or Oxygen, you can give a try to create a personalized 404 Error page. It is much easier as you have the option of adding a 404 page within the Page Builder interface.

For the following example, we are going with Elementor. However, you are free to use a different one, given it has the option to create a 404 Error page. As for Elementor, it is a leading Page Builder that provides the user with a visual drag-and-drop UI to make things simple. Furthermore, the pro version affords a more user-friendly 404 Error page that allows users to add custom branding, which is something to look forward to.

Now, follow the steps provided below to create a 404 Error page:

1. First, launch Elementor Pro after purchasing a subscription and activating your account.
2. Then navigate to Templates and choose Theme Builder.
3. After that, click on Add New. You can see a Page Template.
4. Here, choose the type of template. Click on Template and select Single.
5. Then choose Post Type as 404 Page.
6. Now you are ready to proceed with the actual building process. But first give this template a name, something like Error Page or something but don’t use 404 in the name as it can cause issues with WordPress’ permalinks.
7. After you are done, click on Create Template to proceed further.
8. Now you have the option of either choosing an existing design and creating a new one. Select either “Pre-Made Template” or “Design New One“, based on your needs.
9. After finalizing your design, click on the Publish button.
10. The Elementor Page Builder will automatically include this design to display as your 404 Error page.
11. Finally, click on the Save & Close option to end the process.

Method 3. Creating a custom Error 404 page via Plugins

And finally, we have the easiest way to go about custom 404 Error pages, and that is to use a plugin. There are hundreds of WordPress plugins available on the platform. But we will go forward with the tried and tested 404page as our example. The plugin has over 100,000 active installations and mostly positive reviews. As such, it is one of the most used plugins when it comes to creating or adding a custom 404 Error page.

The entire process is rather straightforward:

1. Go to the WordPress plugin directory and search for 404page. It is a free plugin.
   • First, go to the Dashboard and click on Add New.
   • Then click on the search box and look for 404page.
2. Download and install it.
3. Now, make sure to have a custom 404 page at hand.
4. Simply go to Dashboard, click on Pages, and select Add New to create a page.
5. Then customize the page as per your need.
6. After that, go to Appearance and look for the 404 Error Page section.
7. Select the General tab and then click on the drop-down menu and choose the custom page you just created as your 404 Error page.
8. Now click on Save Changes.
9. And you’re done.