Why on earth would you want to build a customized 404 error page for WordPress? Isn’t that wasted time and effort? Shouldn’t you rather invest in making your site airtight so that nobody will ever be confronted with it in the first place?
Fair point. On the Internet, 404 is probably among the most hated numbers in existence. Visitors curse it, webmasters try to eradicate it and overall nobody has good things to say about it. (On the other hand, one of the most desired digits online is Matt Mullenweg’s phone number. Just kidding, that link doesn’t go anywhere.)
The reason for the animosity is that 404 is the HTTP status code for a non-existent url. Every time someone requests a web page that cannot be found on the server, they will be prompted with the dreaded “404 page not found.”
There are several reasons why such an error should occur:
- The link has changed without proper redirects
- A typo in the url
- The page no longer exists
WordPress handles above problems in the same way, faulty requests get routed to an error page. The good news is that, WordPress being WordPress, you can customize this page just like any other part of your WordPress website. And there are good reasons to do so.
Why would you want a custom 404 error page?
First, let’s take a look at what a standard error page for non-existent links in WordPress might look like:
This is what visitors see on the new Twenty Fifteen standard theme when they strike out on the url. As you can see, all it says is “Oops! That page can’t be found.” and gives you a search bar for an attempt to find the content your were looking for.
Not very informative, is it? And kind of impersonal, am I right?
Yet, this is what every user who comes to your website through an incorrect link is confronted with. While the search bar is a nice step in the right direction, this kind of page is not very helpful and, unless they really needed that content, would send a good part of visitors elsewhere.
However, the goal of your website is to keep people on there as long as possible, isn’t it? So they can read your wonderful content, become raving fans and tell everyone about your amazing products, amiright? Wouldn’t it be better then if every part of your site was aimed at this goal? Even the ones that you hope nobody will see?
Exactly! I knew we would come to an understanding. You’re much smarter than the last guy that was here. And much more handsome.
However, now the question is how can you redesign your 404 page that it will engage rather than scare off visitors. So that even if they don’t find what they are seeking for initially, they are still tempted to stay on your site. That’s what we will look at now.
Hallmarks of an effective 404 error page
A customized 404 error page can be a great tool for visitor retention. Even should one of your links turns out to be a dud (for any of the above reasons), if your page helps readers find something worthwhile, they will greatly appreciate it and stick around.
Ideally, a 404 error page will therefore fulfill the following functions:
- Help users find the information they are looking for
- Offer an apology
- Keep them engaged
- Be consistent with the rest of your site
Optionally, it can also :
- Offer a bit of entertainment
- Show some personality (especially if you are running a blog)
If done right, instead of being the worst possible outcome, your 404 error page can be a chance to show the best side of your website. Visitors greatly appreciate feeling taken seriously and that you really care about providing them with the information they are seeking. It builds immediate trust and comfort and can reduce your bounce rate from the error page.
With the above in mind, what should be on your 404 page in concrete terms? The answer will be slightly different depending on the kind of website you are running. To answer it for yourself, think about what would be the next best or most helpful thing your visitors could want if they don’t get to the place they expected.
- Provide ways to search for the content they are interesting in (e.g. in the shape of a search form)
- Access to your site’s main navigation to look for it manually
- A list of recent posts (if you are running a blog)
- A way to contact support (for example, if a product can not be found or a purchase not completed)
You get the idea. Once you have a concept of what should be on your page, it is time to figure out how to get it there.
Building a custom 404 error page in WordPress
When working with WordPress, setting up a custom 404 page is quite easy. The platform is set up in a way that all requests which can not be fulfilled are routed to the 404.php file in your theme directory. Most themes should already have it, otherwise you can also create one yourself.
If your theme comes with a basic 404 page (as, for example, all WordPress standard themes do), you can edit it directly from there. As usual, a better idea to make customization is to do it via child theme so you don’t lose your changes to updates.
To do so, merely copy your main theme’s 404.php file and begin editing. If it doesn’t exit, below is some fairly standard code from the Twenty Fifteen theme as a starting point for creating your own. Be aware of the word “starting point”. It is not guaranteed to work with your theme.
<?php get_header(); ?> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <section class="error-404 not-found"> <header class="page-header"> <h1 class="page-title"><?php _e( 'Oops! That page can’t be found.', 'twentyfifteen' ); ?></h1> </header><!-- .page-header --> <div class="page-content"> <p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentyfifteen' ); ?></p> <?php get_search_form(); ?> </div><!-- .page-content --> </section><!-- .error-404 --> </main><!-- .site-main --> </div><!-- .content-area --> <?php get_footer(); ?>
Another way to get started if your theme doesn’t come with its own 404 page, is to copy the index.php file, remove any code having to do with posts and comments (otherwise called “the Loop”) and start from there.
However, in the above case I will just start editing the existing template. For example, I might want to do a simple edit of the message’s wording. In order to do so, I need to look at the following piece of code:
<h1 class="page-title"><?php _e( 'Oops! That page can’t be found.', 'twentyfifteen' ); ?></h1>
I will now change it to the following:
<h1 class="page-title"><?php _e( 'Yikes, you 404’d!', 'twentyfifteen' ); ?></h1>
Simple, right? If you know a little bit of coding, you can now make any changes to the 404 page that you want and create your perfect template. However, what if you do not know how to code? Don’t worry, we got you covered, too.
Taking your 404 page to the next level with widgetized areas
If you don’t feel confident enough in your PHP skills to hardcode your own template, there is another solution: widgetized areas. Including widget areas in your 404 template allows you to flexibly change its entire look by drag and drop. Much easier than writing a whole page template from scratch.
Creating the widget
To take advantage of this technique, the first step is to create a widget area which you can then integrate into your template. Creating a widget area happens by inserting the following code in your functions.php file:
register_sidebar( array( 'name' => '404 Page', 'id' => '404', 'description' => __( 'Content for your 404 error page goes here.' ), 'before_widget' => '<div id="error-box">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>' ) );
Of course you can customize this to fit your needs. While the above code will make the widget area appear in your backend, content added to it will not yet show up on your site. For that, you need to add the newly created widget area to your template.
Adding the widget to your page template
For that, open up the 404.php file and add the following line of code:
<?php dynamic_sidebar( '404' ); ?>
The “dynamic_sidebar” function will insert a widgetized area in the place you add it in the template. Make sure you enter the appropriate name/id of your newly-created widget and it should show up on your page.
Adding content to the widget
Widget areas on the 404 page work exactly the same way as any other. Choose one or several widgets you would like to show up there, drag and drop them to the area, configure and save. It is up to you whether you add a search bar, recent posts, text and images or anything else you can think of. It is entirely up to you. However, here are a few ideas:
Custom text and search bar
Of course you can also mix and match several of the ideas above or do something completely different. If you are still not sure what to put on your 404 error page, below you can find a bunch of examples of people who have solved this brilliantly.
Awesome 404 page designs
To jog your inspiration muscles, take a look at these cool ideas on how to built an engaging and entertaining custom 404 page (click on the images to get to the actual page).
Hot Dot Productions
Custom 404 error pages for WordPress in a nutshell
As you have hopefully seen, the dreaded 404 error page can do much more than be a mark something gone wrong. If done correctly, it can actually be a great communication tool just like the rest of your page. Even if visitors are initially unable to find what they are looking for, they don’t have to feel lost.
Fortunately, WordPress makes it incredibly easy to customize these pages to your liking. Whether you decide to hardcode your message or go the flexible widget route, there are no limits to your design ideas.
What do you think belongs on a good 404 page? How have you solved this for your own website? Anything to add to the above? Tell us in the comments.
Nick Schäferhoff is an entrepreneur, online marketer, and professional blogger from Germany. He found WordPress when he needed a website for his first business venture and instantly fell in love. When not building websites, creating content or helping his clients improve their online business, he can most often be found at the gym, the dojo or traveling to other countries with his fiancé. If you want to get in touch he would love to hear from you through his website.
Join the conversation