Creating a custom 404 error page

We get a 404 – page not found error whenever the server is unable to provide the content for a requested URL. This might be due to the server being down, a mistyped URL, or because content has been removed from the site. WordPress provides a built-in 404 page with a very simple message called Nothing Found, along with a form to search the site.

Many websites use custom well-designed 404 pages to attract more visitors by converting the error into something useful. In this recipe, we are going to create a custom 404 page with custom content for our theme.

Getting ready

You should have the Twenty Twenty Child theme activated on your site. Open the code editor and make sure you have access to the theme files in your local or external WordPress installation.

How to do it...

Follow these steps to create a custom 404 template for the child theme:

1. Open the browser and type in a non-existent URL for your site. If your site is www.yoursite.com, you can type in a random value such as www.yoursite.com/dewf687f6e8w to see the 404 page shown in the following screenshot:

2. Go to wp-content/themes/twentytwenty and copy the 404.php file.
3. Paste the file inside the wp-content/themes/twentytwentychild folder.
4. Open the 404.php file in wp-content/themes/twentytwentychild folder. You will see the following code section:

<div class="intro-text"><p><?php _e( 'The page you were looking for could not be found. It might have been removed, renamed, or did not exist in the first place.', 'twentytwenty' ); ?></p></div>

<?php
    get_search_form(
      array(
        'label' => __( '404 not found', 'twentytwenty' ),
      )
    );
 ?>

5. We can customize this section to create a better looking 404 page with necessary information.

6. Replace the message inside the intro-text<div> element, like so:

<div class="intro-text"><p><?php _e( 'The page you were looking for could not be found. It might have been removed, renamed, or did not exist in the first place.Maybe try a search or view our posts?', 'twentytwenty' ); ?></p></div>

7. Next, copy the following code from the post-grid.php file we created in the previous recipe and add it after the intro-textdiv element to display a post grid inside the 404 template:

<?php 
 $post_list = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=> 3 )); ?>

<?php if ( $post_list->have_posts() ) : ?>
 <div id="list-post-panel">
 <ul>
 <?php while ( $post_list->have_posts() ) : $post_list->the_post();
 $image = get_the_post_thumbnail_url( get_the_ID()); ?>
 <li>
 <div class="post-list-featured-image"><img src="<?php echo $image; 
  ?>" /></div>
 <div class="post-list-title"><a href="<?php the_permalink(); ?>"><?php the_title(); 
  ?></a></div>
 </li>
 <?php endwhile; ?>
 </ul>
 <?php wp_reset_postdata(); ?>
<?php endif; ?>
</div>

8. Save the content of the 404.php file.
9. Visit the URL in step 1 again.

Now, you will see the modified 404.php page, as shown in the following screenshot:

As you can see, we have changed the message to ask the user to search the site or view available posts. So, the visitor will think about using these features and staying on the site without leaving after seeing the error.

How it works...

Once the user accesses an invalid URL, WordPress will look for a valid 404 template. The 404 template is generated by the 404.php file of the theme, so it will be a theme-specific page.

If a valid 404.php file is not available in the theme, WordPress will load the default 404 content within the core with a basic message and search form.

In this scenario, we have created a 404.php file in the child theme using the 404.php file of the parent theme. Now, WordPress will look for the 404.php file within the child theme, instead of the parent theme. In the custom 404 template, we removed the original header of the Twenty Twenty template and changed the message to the following:

<?php _e( 'The page you were looking for could not be found. It might have been removed, renamed, or did not exist in the first place.Maybe try a search or view our posts?', 'twentytwenty' ); ?>

Then, we used the code from the previous recipe to display the post list on a 404 page. However, the following code only limits the post list to three entries as this is a 404 page and too much information can discourage the user to browse the site:

<?php $post_list = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=> 3 )); ?>

The other parts of the code are exactly same as they are for the post-grid.php file.

There's more...

The purpose of designing a custom 404 page with additional content is to motivate the user to keep using the site when they feel frustrated after receiving an error. This error can be due to their mistakes in requesting an invalid URL or the requested content not being available at that time. In any case, we have to make sure to effectively use a 404 page to keep the users on our site. Modern sites are using creative designs and valuable content in 404 pages to attract users. Let's look at some of the things we can do in 404 page designs:

• Inform the user about the error: We should add a message informing the users that an error has occurred and possible reasons for the error. Also, it's good practice to apologize, even with a simple Sorry statement.
• Inform the user about the next step to take: Including a search form asking to search the site, providing links to commonly used parts of the site, or asking them to contact you can be valuable for the user to move forward and stay on the site.
• Show a glimpse of the most important site content: This is actually an advantage for the site owner as they can provide the content that they want the user to see. This could be the most popular posts on a blog or popular products in a store.
• Show something funny or creative: Regardless of whether a visitor requested an invalid URL or whether the site generated the error for the URL that existed previously, the visitor is going to be a bit annoyed. So, including a funny or creative video, image, or design can help change the mood of the visitor and motivate them to use the site.

You should use one or more of these techniques and build a productive 404 error page that helps the users as well as benefit you as the site owner.