April 03, 2021

Custom 404 Page in WordPress

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

Custom 404 Page in WordPress

A 404 page is displayed to the user when the certain content the user is looking for is not found. 404 is an HTTP status code that implies that the content is "Not Found". When a webpage link that does not exist is visited, the 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 a server issue, not being able to serve the page.
 

Why Use a 404 Error Page?

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

  • For a better user experience, it is good to add a 404 page as a useful guide instead of showing a blank page.
  • To encourage users to stay on the website even if a certain page is not found, by providing them with links to other useful pages of the website. This helps keep visitors 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 adding a 404.php file that serves as a 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 want to update or change the content to fit your needs. The following are the steps to create a 404 page in WordPress:

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

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.', 'text-domain') ?>
                </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 the user experience better. The 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