This content originally appeared on DEV Community and was authored by Muhammad Rauf

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

Here’re 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(); ?>

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 to add 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 question about this simple 404 error page.

This content originally appeared on DEV Community and was authored by Muhammad Rauf

Print Share Comment Cite Upload Translate Updates

APA

Muhammad Rauf | Sciencx (2021-12-03T16:01:35+00:00) How to Create Custom 404 error page. Retrieved from https://www.scien.cx/2021/12/03/how-to-create-custom-404-error-page/

MLA

" » How to Create Custom 404 error page." Muhammad Rauf | Sciencx - Friday December 3, 2021, https://www.scien.cx/2021/12/03/how-to-create-custom-404-error-page/

HARVARD

Muhammad Rauf | Sciencx Friday December 3, 2021 » How to Create Custom 404 error page., viewed ,<https://www.scien.cx/2021/12/03/how-to-create-custom-404-error-page/>

VANCOUVER

Muhammad Rauf | Sciencx - » How to Create Custom 404 error page. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/03/how-to-create-custom-404-error-page/

CHICAGO

" » How to Create Custom 404 error page." Muhammad Rauf | Sciencx - Accessed . https://www.scien.cx/2021/12/03/how-to-create-custom-404-error-page/

IEEE

" » How to Create Custom 404 error page." Muhammad Rauf | Sciencx [Online]. Available: https://www.scien.cx/2021/12/03/how-to-create-custom-404-error-page/. [Accessed: ]

rf:citation

» How to Create Custom 404 error page | Muhammad Rauf | Sciencx | https://www.scien.cx/2021/12/03/how-to-create-custom-404-error-page/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

How to add custom 404 error page

Related Posts