How To Create Custom 404 Error Page in PHP or HTML Using .htaccess

If you are looking for How to create a custom 404 page in PHP or HTML then you are at the right place because in this article I will share everything you need to know about how to create your own custom 404 page for your website.

What is 404 Erro or Page Not Found Error?

Well, let's start with the basics. The 404 error is an HTTP (Hypertext Transfer Protocol) status code. It's returned by the server to your web browser when it can't find the page you're looking for. In other words, the URL you typed into your browser, or the link you clicked on, doesn't lead to anything. It's like trying to find a needle in a haystack, but instead of a needle, you're looking for a webpage, and instead of a haystack, you're searching the vastness of the internet.

But why do 404 errors happen in the first place? Well, there are a few reasons. Perhaps the page has been moved or deleted, the URL was typed in incorrectly, or the link you clicked on is broken. Whatever the cause, one thing's for sure: 404 errors are an inevitable part of the web browsing experience. But don't worry, they're not the end of the world. With a little detective work and a bit of patience, you can usually find what you're looking for. And who knows, you might even stumble upon something new and unexpected along the way!

 

Why you should add a 404 page to your website?

Picture this: You're on a website, eager to learn more about a new product or service. You click on a link and... nothing happens. The page is blank, or worse, a plain, boring error message pops up. "404 Error. Page Not Found." You're left scratching your head, wondering what went wrong. Frustrated and disappointed, you close the website and move on to the next one. Sound familiar?

Well, here's the good news: It doesn't have to be this way. With a custom 404 page, you can turn a negative experience into a positive one. And the best part? It's easier than you think. A custom 404 page is a simple, yet powerful tool that can help keep visitors on your website and improve their overall experience.

But wait, why you should add a 404 page to your website? For starters, it's an opportunity to showcase your brand's personality and creativity. A well-designed 404 page can be a reflection of your company's culture and values. It can also provide helpful information and resources to guide visitors back to the content they were searching for. And let's not forget about the search engine optimization (SEO) benefits. A custom 404 page can help you minimize the number of broken links on your website, which can negatively impact your search engine rankings.

 

How To Create Custom 404 Error Page in HTML/PHP Using .htaccess

So let's learn how to create a custom 404 page in HTML/PHP. First, I will show you the PHP version then I will show you the HTML version. You can use any of them, they both will work on HTML and PHP websites.

 

How To Create Custom 404 Error Page in PHP

Step 1: Create or Modify .htaccess File

First, you have to visit your website's public_html folder where the whole website codes will be available meaning the core of the website. Then you have to search for a file name .htaccess if you dont find the file then you should check the Hidden Files. If you are still unable to find the file then that means you dont have the file and you have to create it. Simply create a new file and name it .htaccess that's it you now have the htaccess file on your website and if you find the file then also follow the next step.

Now open the htaccess file in edit mode and add this code to the file ErrorDocument 404 /404.php if you want to use PHP or this code ErrorDocument 404 /404.html if you want to use HTML at the top of the other codes, if you see any codes then do not tamper with them it might brake your website just add some paragraphs and then add the code on top of the other codes. Now your custom 404 page is almost ready.

Now if someone visits a broken link of your website then they will see this page. This means you did everything correctly and you can start the next step.

If you want to use PHP then use Step 2 or if you want to HTML then use Step 3.

Step 2: Create a Custom 404 Error Page in PHP

Now you have to create a new file name 404.php on the same path, meaning the website home directory. Now open the just-created file and add this code to it.

<?php
 header("HTTP/1.0 404 Not Found");
?>
<html>
    <head>
        <title>404 Error - Page Not Found</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
        <body>
            <center>
                <h1>404 Not Found</h1>
                <p>The page you are looking for does not exist.</p>
                <a href="/">Go Back To Home Page</a>
            </center>
        </body>
</html>

 

Step 3: Create a Custom 404 Error Page in HTML

Now you have to create a new file name 404.html on the same path, meaning the website home directory. Now open the just-created file and add this code to it.

<html>
    <head>
        <title>404 Error - Page Not Found</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
        <body>
            <center>
                <h1>404 Not Found</h1>
                <p>The page you are looking for does not exist.</p>
                <a href="/">Go Back To Home Page</a>
            </center>
        </body>
</html>

 

After saving the code if someone visits a broken link of your website they will see this page. You can also check the page by adding some random text at the end of your domain URL, something like this https://example.com/randometext. Now, remember this is just a simple sample code, which you can edit if you know the basics of HTML and CSS knowledge.

Your Custom 404 Error Page in PHP is completed you can rest easy knowing that your broken link traffic will be safe. If someone visits your broken link now they can go back to your home page by clicking the Go Back To Home Page.

 

How To Customize The Code?

If you want to customize the code your way then here are the changes you have to make.

Customize the Title

To change the title of the 404 page from 404 Error - Page Not Found to your preferred text, you have to edit this part <title>404 Error - Page Not Found</title> of the code. Just remove the text only without removing the < >. 

Customize the Text

To change the 404 Not Found and The page you are looking for does not exist. you have to make changes in this part <h1>404 Not Found</h1> and <p>The page you are looking for does not exist.</p> of the code. Just replace the text with your text and you are good to go.

Customize the Link and Link Text

To change the link and link text you have to edit this part <a href="/">Go Back To Home Page</a> of the code. To change the link text from Go Back To Home Page to your custom text just change the text only. And to change the home page URL to some other page you have to change the forward slash in this part of the code href="/" something link this href="https://example.com/".

NOTE: Make sure you save the file after editing is done and don't remove the <> from any part of the code, if you remove them then the code will not work properly. And if you want to compress the HTML code so it will take less space then try our HTML Minifier.

 

I think I have made everything clear, If you have any questions or suggestions then feel free to contact us anytime we love to hear from you.

Thank you for reading this article and have a nice day.