How to Make a Custom 404 Page in a WordPress Child Theme

No matter how well-designed and architected your website is, users will likely encounter a 404 page at some point.

It can be something as simple as typing in a URL with a spelling error. For example, if you have a contact page found at www.website.com/contact and someone tries to land on www.website.com/contacts, there’s a good possibility they’ll be redirected to the 404 page.

Also, website content adjustments may not always account for pages that could have been moved without links being redirected. Hopefully, this experience doesn’t happen too often to your users, but when it does, it’s an opportunity to offer help and make something unique to your brand.

Chances are you’re no stranger to 404 pages on the web, so you may already have a design in mind. If not, try Googling “cool 404 pages,” and you’ll find all sorts of inspiration. Design can be anything from serious to funny, text-heavy or minimalist, or somewhere in between.

Below are a couple of our favorites. They’re good examples of how creativity is used in the design of the page.

Figma

Figma uses a simple 404 page, but the graphic is very fitting with the vector points. We like how simple and bold it is; it’s really all that is needed..

MailChimp

The design is always fun on the MailChimp site, especially with the recent redesign. It has an element of humor in both the text and illustration.

Creating a Custom 404 Page

First things first: All customizations should be done in a child theme. That way any modifications won’t be overridden by updates to the regular theme. This 404 page will be a file in the child theme, the file named 404.php to be exact.

Also, remember to do this in a test environment. When theme files are being changed, there’s always the possibility of syntax errors that may bring the site down.

1. Make a New File

When you have the child theme, the first step is to create a new file to begin working with. You’ll want to open the folder where you created the child theme and add a 404.php file.

2. Edit the File

Basic example

This example accounts for a page that has text and an image. The design idea here is to create something simple that requires an illustrated graphic.

Paste the following code into the 404.php page. It’s a basic start. You can modify things to a different structure to really make it your own (i.e., if you don’t want a sidebar, that can be removed).

<?php get_header(); ?>

<div id="main-content">
  <div class="container">
    <div id="content-area" class="clearfix">
      <div id="left-area">
        <article id="post-0" <?php post_class('post_not_found'); ?>>
          <img src="/images/image.jpg" alt="404 Error Image">
          <h1><?php esc_html_e('404'); ?></h1>
          <h2><?php esc_html_e('Oops, this page cannot be found.', 'WP Loop'); ?></h2>
        </article>
      </div>
      <?php get_sidebar(); ?>
    </div>
  </div>
</div>

<?php get_footer(); ?>

There are a couple modifications you’ll have to do. One is changing the path to the image and to include the title you want. Don’t forget to write a custom message and then save your changes.

If you followed the instructions this far, you’ve created a custom template with an image, message and standard header, sidebar, and footer. (You may have this on the other pages, too.)

Widget Approach

This is optional, but many designers prefer to work with widget areas. It’s easier to make changes and more maintainable. For example, a widget is an efficient way to display the most recent and popular blog articles.

Adding the Widget

To add the widget to the 404.php file, you’ll need to create a new widgetized area. A child theme needs a functions.php file, so now’s the time to double check that the child theme has one.

In the functions.php file, a snippet will be needed to add a new widget on the page.

function widget_area_404() {
    register_sidebar( array(
        'name' => '404 Page',
        'id' => '404',
        'description' => __( 'Widgets for 404 error page.' ),
        'before_widget' => '<div class="et_pb_post">',
        'after_widget' => '</div>',
        'before_title' => '<h4 class="widgettitle">',
        'after_title' => '</h4>',
    ) );
}
add_action( 'widgets_init', 'widget_area_404' );

This snippet only adds the widget. To actually begin using it, this function has to be called. It will be called in the 404.php file. Keep an eye out for the location where you want this widget area.

Copy and paste the following code where you want to show new widgets (for example, after the title and text):

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

Now that you’ve established where to display the new widget area, it is time to add the widget content by going to Appearance > Widgets. Here’s where you can choose things like an HTML block, Popular Posts, or any other widget for the 404 page.

Whether you’re creating something simple or a page with many links, creating a custom 404 page is pretty straightforward. By using a child theme and utilizing widgets, there are unlimited design possibilities.