How to add a custom 404 error page

Hello, Do you need to add a custom 404 error page on your website/blog? 404 error happens when a user opens a non-existing page on your website such as an incorrect link, a page that has been deleted, or when the user mistyped a URL.

In this tutorial, you will learn how to add a custom 404 error page on your website/blog. Next, We will describe how to change the title of 404 error pages and prevent them from being indexed by Google.

How to add a custom 404 error page

Here’re steps to adding a custom 404 error page on your WordPress website/blog –

1. First, log in to your WordPress Dashboard.
2. Go to Appearance > Theme Editor.
3. Under theme Editor find the 404.php option and click on it.
4. Now copy and paste the following code into the page.

<?php get_header(); ?>
<img src="https://i.ibb.co/W6tgcKQ/softcodeon.gif">
<title>Page Not Found</title>
<h1 class="error-text">Whoops, We can't seem to find the resource you're looking for.</h1>
<p class="text">Please check that the Web site address is spelled correctly.Or,</p>
<div class="button">
<a class="error" href="#">Go to Homepage</a>
</div>
<style>
*{padding:0;margin:0;background:#f0f0f0;}
img{display: block;
  margin-left: auto;
  margin-right: auto;}
  .button{text-align:center;}
 .text{text-align:center;font-size:20px;margin-bottom:40px;}
 .error-text{text-align:center;padding:20px;  font-family: Cursive;
} .error{font-family: 'Roboto', sans-serif;font-size:1.5rem;text-decoration:none;padding:15px;background:#6200ee;color:#fff;border-radius:10px;}
</style>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Finally, tap the “Update File” button.

Note: Please Keep in mind if you have the same classes as I have added in the above code please change them with the unique classes you want. You can also customize the style by adding background color, changing image or Gif, Modify Font Family, and text for the error page.
To prevent Google and other search engines from indexing 404 error pages of your blog Follow this guide to know How to Hide a Page from Google Search

Want to read in detail from our official website Create 404 Error page. I’ll recommend adding other best page links to your 404 error page.

To see DEMO

I hope you find this guide helpful to customize the 404 error page of your website blog. Please discuss below if you have any questions about this simple 404 error page.