Creating a Custom 404 Error Page in WordPress

The 404 error mainly occurs when the webpage you were trying to reach could not be found. You work hard to make sure all links are workable, but there is always a chance for broken links existence. The broken link redirects the user to the 404 error page and shows PAGE NOT FOUND error. In WordPress, 404 Page Not Found is a common error that most users face. Many times 404 error obliges users for leaving the website which affects your business. So, showing a custom 404 error page with a useful message than PAGE NOT FOUND will be a great idea.

In this tutorial, we will show you how to create a custom 404 error page in WordPress and display it when the user encountered a Page Not Found error. Not only the content of 404 Error page, but also you can customize the full page layout using a custom 404 error page header.

404.php

Almost all WordPress theme has a 404.php file. If you don’t found any 404.php file in your current WordPress theme, create a PHP file named 404.php and placed into your current theme directory (wp-content/themes/current_theme/404.php).
Insert the custom 404 error page HTML into the 404.php file. A simple and useful 404 error page content are given below.

<?php get_header(); ?>
<div class="row">
    <div class="col-lg-12">
        <div class="error-template">
            <h1>Oops!</h1>
            <h2>Sorry Something Went Wrong!</h2>
            <div class="error-details">
                For some reason the page you requested could not be found on our server. Please pick an option from the below.
            </div>
            <div class="error-actions">
                <a href="<?php echo site_url(); ?>" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-home"></span>&nbsp;Take Me Home </a>
                <a href="<?php echo site_url(); ?>/contact" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-envelope"></span>&nbsp;Contact Support </a>
            </div>
        </div>
    </div>
</div>
<?php get_footer(); ?>

header-404.php

If you want to customize the layout of 404 error page including the header section, you need to include a custom header in 404.php. The custom 404 error page header name would be header-404.php. Create a PHP file named header-404.php and placed into your current WordPress theme directory (wp-content/themes/current_theme/header-404.php).
Use the following code to include a custom 404 error page header in WordPress.

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

Testing Custom 404 Error Page

Once the 404 error page creation is completed, now it’s time to test whether working or not. Type a URL into your browser that doesn’t exist. You’ll see the custom 404 page not found error page appears.