ADVERTISEMENTS

How to create custom 404 Error Page in WordPress

Himanshu BatraJun 21, 2019
How to create custom 404 Error Page in WordPress

If you found error i.e. Page not found on any site, it means that is 404 error which is originated by HTML protocol. It means that this page doesn't exist on site where you are trying to visit. Sometimes, we users trying to visit any relative url on your wordpress site which doesn't exists. So, it redirects to error 404 page. Most of the times this error obligate users for leaving the site which reflects your business growth. In this case, showing error 404 page with custom useful message will be a great idea.

ADVERTISEMENTS

Step 1) Content Page : 404.php

In WP, most of the themes have 404 error file i.e. 404.php. If you don’t have this file in active theme of WordPress, create new PHP file with name 404.php and add it into your directory of active theme i.e. wp-content/themes/current_theme. Here is our code for content file which you can add or replace inside your existing 404.php file.

<?php get_header(); ?>
<div class="custom_row">
    <div class="col-md-12">
        <div class="custom-404-template">
            <p>Page Not Found!</p>
            <p>Sorry There is something which is missing!</p>
            <div class="error-block-details">
                Due to some technical reasons, requested page could not be found here.
            </div>
        </div>
    </div>
</div>
<?php get_footer(); ?>

 

Step 2) Header Page : header-404.php

In first step, we have update 404 page content with custom layout with effective message. In this step, if you also want to change layout of your site header for 404 page, clone file i.e. header.php with name i.e. header-404.php at same path of theme folder i.e. wp-content/themes/current_theme.

After creating seperate header file for 404 page, update the following code in 404.php.

<?php get_header(); ?>

          with

<?php get_header( '404' ); ?>

 

ADVERTISEMENTS

Step 3) Footer Page : footer-404.php

Similar Step 2, if you want to create a seperate footer layout for error 404 page. Follow same step 2 but with different file name i.e. footer-404.php and update the following code in 404.php.

<?php get_header(); ?>

          with

<?php get_header( '404' ); ?>

After completion of above steps, just check any random url path which doesn't exist to your website. You’ll get new custom 404 page layout.

ADVERTISEMENTS