How to Create 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.

The default 404 error page for most blogs doesn’t look very professional. It simply displays an error message: “Whoops, We can’t seem to find the resource you’re looking for.” Please check that the Web site address is spelled correctly. Websites also have the option to customize the 404 error page. You can change the style of this error message using HTML and CSS and make it more professional.

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 custom 404 error page

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

1. First, login to your WordPress Dashboard.
2. Go to Appearance > Theme Editor.
3. Under theme Editor find 404.php option, and click on it.
4. Now copy and paste the following code in 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(); ?>

1. 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.

If you want to add a 404 error page on your simple webpage then remove PHP code from the above code and paste it where you want to show this message.

Prevent Google from indexing 404 error pages

To prevent Google and other search engines from indexing 404 error pages of your blog, simply add a no-index robots meta tag. Follow this guide to know How to Hide a Page from Google Search –

I hope you find this guide helpful to customize the 404 error page of your website blog.