April 03, 2021

Custom 404 Page in WordPress

A 404 page is a standard page where user is redirected when user tries to visit a specific page that does not exist on web server. Learn in this post to create a custom 404 page in WordPress without a plugin.

Custom 404 Page in WordPress

A 404 page is displayed to user when a certain content user was looking for is not found. 404 is an HTTP status code which implies that a content is "Not Found". When a webpage link that does not exist is visited server responds with this status code.  A 404 can occur for different reasons:

  • The URL accessed really does not exist or is not a valid URL.
  • The webpage has been removed or changed.
  • The URL was typed incorrectly.
  • Sometimes it could be server issue not able to serve the page.

Why Use a 404 Error Page

It is a common and good practice to add custom 404 page in WordPress websites for following reasons:

  • For a better user experience it is good to add 404 page as useful guide instead of showing a blank page.
  • To encourage users to stay on website even if a certain page is not found by providing them links to other useful pages of website. This helps keep visitor engaged instead of leaving the website.
  • It can be used for branding options by providing custom content for pages that cannot be found. It also makes the experience less frustrating.
 

How to Create a Custom 404 WordPress Page

WordPress themes have a hierarchical structure of theme files. It allows to add a 404.php file which serves as custom 404 page. In this post we are going to create a custom 404 page in WordPress. You probably have a 404 page already included in your theme and you might just wanted to update or change the content to fit your needs.  Following are the steps to create a 404 page in WordPress:

  • Go to your active theme folder which is inside wp-content/themes/your-theme-folder.
  • Create a PHP file named 404.
  • Add WordPress header content using function get_header().
  • Add the content for 404 message and also add a search form using get_search_form() function to allow user to search.
  • Also add a link to homepage in 404 page content for allowing user to navigate to home page of website.
  • Add other helpful content like link to sitemap or navigation links which should already be a part of header content.
  • At the end add the footer content using function get_footer().

404.php

<?php get_header();?>
    <section class="section py-5">
        <div class="container">
            <div class="mb-5">
                <h1 class="section-title"><?php _e('404 - Content Not Found', 'text-domain')?></h1>

                <p>
                    <?php _e('The content you are looking for does not exist or has been removed.', 'am-financials')?>
                </p>
            </div>

            <div class="mb-5">
                <p>
                    <?php _e('Please use the form below to search what you are looking for or <a href="' . esc_url(home_url()) . '">click here</a> to go to the home page.', 'text-domain'); ?>

                </p>

                <?php get_search_form();?>
            </div>
        </div>
    </section>
<?php get_footer();?>

The above code snippet is an example of a basic 404 page in WordPress. You can modify the content to match your website niche. Besides this approach you can use free WordPress plugins available to add custom pages. These plugins usually provide an interface to design your custom pages.

 

Practices to Follow for 404 Page

The 404 pages are created for a purpose to make user experience better. Following points should be considered when creating a 404 page in WordPress:

  • Keep the error message clear to let users know the page does not exist.
  • Add a search form and navigation links for users to navigate or search instead of leaving.
  • Use the same design as other pages of your website.
Home