How to Make a Custom 404 Page in a WordPress Child Theme
No matter how well designed and architected your website is, users will 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, by Googling “cool 404 pages,” you’ll find all sort of inspiration. Design can be anything from serious to funny, text-heavy or minimalist, or somewhere in between.
Below are some of my favorites. They’re good examples of how creativity is used in the design of the page.
Figma
Figma is a simple 404 page, but the graphic is very fitting with the vector points. I like how simple and bold it is; it’s really all that is needed.
Airbnb
This example offers a bit more in terms of content. The illustrative approach ads an element of humor. This includes some of the main links. If a user has mistyped something, it’s possible that they may be able to find what they are looking for in the list.
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">
<h1><?php esc_html_e('404'); ?></h1>
<h2><?php esc_html_e('Oops, this page cannot be found.','WP Loop'); ?></h2>
</article> <!-- .post_not_found -->
</div> <!-- #left-area -->
<?php get_sidebar(); ?>
</div> <!-- #content-area -->
</div> <!-- .container -->
</div> <!-- #main-content -->
<?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.
