Creating Custom WordPress 404 Error Pages

Posted on September 5, 2014 by in Tips & Tricks | 28 comments

Creating Custom WordPress 404 Error Pages

Chances are, you’ve come across the “404 Not Found” error page. 404 refers to the HTTP status code a page receives when a URL does not exist. So every time a user visits a link that doesn’t live on your site, they will be served a default 404 page informing them of that fact. There is a story that the 404 code came from the number of the first room to hold a WWW database server, but this is a myth. It’s just the number assigned by the W3C. If you’d like to see a 404 page in action, you can see an example on Elegant Themes.

The 404 page is relatively underutilized, often stating that a page does not exist without providing too much additional information. Fortunately, WordPress makes it easy to customize your 404 page, so you can use it to provide useful information to your users and direct them elsewhere on your site.

How to Use a 404 Page

A 404 page is displayed by your server whenever a page cannot be found. It usually indicates that a user has mistyped a URL, or followed a link to a page that once existed, but does not anymore. In general, it indicates that your user is lost. And your job, as a responsible website owner, is to help them find their way again.

In these instances, your first priority is to the visitor, to provide an easy path for them to find what they are truly looking for. You can also add some comfort and ease to the page by making it consistent with the overall look of your site, and offering a sincere apology.

So what kind of elements should be added to the 404 page? You’ll want to give your visitor a few different ways to connect to the content they really want. To do so, you can start with more general best practices, then try something that is a bit more granular. A search form, for instance, is a must and offers users a broad way of re-approaching your site. Making sure that your theme’s main navigation exists on the page also falls into this category.

But the most important aspect of a 404 page is in the details. In this article, I’ll run through how to actually set up a 404 page using WordPress, with a few ideas and samples to get you started. I’ll also share with you a trick or two to enhance the page even more.

Setting up a 404 Page

WordPress makes it really simple to create your basic 404 page. Essentially, it routes all pages that aren’t found to a 404.php file in your theme directory. So, if you create a file called 404.php, you’ve already set up your 404 page.

Most themes come with a 404.php file included, with some basic information to start off with. You can go ahead and start editing that file if you want. But the more responsible way to handle this is to build a child theme, and add your 404 page there.

The default 404 page for the Divi Theme

The default 404 page for the Divi Theme

Setting Up a 404 Page on a Child Theme

A child theme builds on top of its parent theme, and allows any updates to a theme to work, while still maintaining any custom elements you decided to add. I won’t go into all the advantages of a child theme, or how to set it up. For that I recommend Nick Roach’s excellent primer post on the topic. I’ll be using a child theme of Divi in this tutorial, but the code is interchangeable for any theme.

Once you have your child theme set up, the first step is to create a file in your child theme folder called “404.php”. This will override the 404 page that ships with your theme, and allow you to make any updates you want. After you’ve created this file, we’ll add a small bit of code, just to get us started.

<?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( 'et_pb_post not_found' ); ?>>
					<h1><?php esc_html_e('Page Not Found','Divi'); ?></h1>
					<p><?php esc_html_e('Whoops. Looks like the page you were looking for doesn\'t exit. Maybe try searching for something else using the search bar above', 'Divi'); ?></p>
				</article> <!-- .et_pb_post -->
			</div> <!-- #left-area -->

			<?php get_sidebar(); ?>
		</div> <!-- #content-area -->
	</div> <!-- .container -->
</div> <!-- #main-content -->

<?php get_footer(); ?>

Nothing too much going on just yet. This is just some boilerplate code to get your page set up. It brings in the WordPress header, footer, and sidebar just like any other page in your theme. In the middle I added a little bit of text, apologizing to the user for the error, and suggesting they try searching for the content they want. Making sure a search form is accessible from your 404 page is essential and a good start, but we can do better. A lot better.

What Content Should Go Into Your 404 Page

In order to determine what content you should add to your 404 page, you first have to assess what kind of site you are running. Your goal is to get the user to relevant content quickly without overloading them with too many choices. Search is useful, but if you’re doing things right, there will be a search bar on every page on your site. On your 404 page, you have to narrow things down a bit.

If you, for instance, are running a blog, then it might be good to provide a list of recent posts. If your site showcases a product, you can direct users to the feature list or FAQ. Or it might be best to simply provide a way for users to contact you if they ran into a problem. Try to get into the mind of your users to figure out what the most likely page to direct them to is. And if all else fails, use analytics to determine what your most popular pages are, and direct users there.

GitHub, for instance, keeps things very simple. Their 404 page has a huge search bar which searches their entire site. Below that, they have included three links to Contact Support or get the status of GitHub, guiding their users to a new page.

github404

Dropbox takes a similar approach, directing users to areas of the site where they can get support, or back to the home page. Logical options, but not too many.

dropbox404

The New York Times takes a more comprehensive approach. In addition to a search bar and a contact link, they also provide a list of recent posts that are particularly popular, hoping to get the reader interested again.

nytimes404

You’ll also want to add your brand’s style to the page so users feel a little more at ease. Elegant Themes, for instance, has a expressive picture on their 404 pages that let users know they feel their pain. Their main navigation is enough to direct users wherever they want to go.

elegantthemes404

The key takeaways here are:

  • Provide your visitor with an apology and useful information
  • Link to support or a way to contact you in case of trouble
  • Add popular content that is tailored to the focus of your website
  • Add a bit of style that puts your own spin on the experience

Once you’ve figured out how what you want to put on the page, the next step is to actually implement it. Rather than re-invent the wheel, and hardcode all of our additions from scratch, we are going to use a built-in WordPress feature that has been around for quite a while: the Widget.

Adding a 404 Widgetized Sidebar

A strategy I saw first proposed by Justin Tadlock, we can use widgets to our advantage when constructing our 404 pages. For those that are unfamiliar, widgets are blocks of content that can be added through a drag and drop interface in the WordPress admin. There are different widgets for different features, such as Recent Posts, plain text, and an RSS feed. Some are included with WordPress and others bundled with plugins and themes. Elegant Themes, for instance, gives you access to a few extra widgets. Widgets are generally placed in sidebars, but they can actually go anywhere on your site.

In other words, most of the building blocks of a solid 404 page come in the form of widgets. If we set up a separate widget area just for our 404 page, then we can easily add images, text and other content in a simple, visual interface, and make changes on the fly.

Setting up the Widget Area

The first thing we need to do is register a widget area so we can begin using it. Luckily, Elegant Themes makes it dead simple to add new widget areas to WordPress. All you have to do is go to Appearance -> Widgets in the WordPress admin. At the bottom of the right sidebar, you’ll see a box which lets you create new Widget Areas. Simply enter in the name “404” in the provided text field, and then click the Create button. Just like that, a new widget area will be added that you can start using right away.

createwidget

Just type in the name of your widget

If you aren’t using a theme from Elegant Themes, you’ll have to add a widget with WordPress’ register_sidebar function. This code will need to be added to the functions.php file of your child theme. If you don’t have one, simply create a file named “functions.php” in your child theme’s directory, and add the following code:

function widget_area_404() {

	register_sidebar( array(
		'name' => '404 Page',
		'id' => '404',
		'description'  => __( 'Widgets placed here will be shown on the 404 Not Found.' ),
		'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 sets up a simple function which registers our sidebar with WordPress and adds some default HTML.

We can start adding widgets to this area in the WordPress admin, but they won’t show up on our page just yet. For that, we have to add our new widget area to the 404 page.

Adding the Widget Area to the Page

Let’s go back to our 404.php file. Right underneath the block of text we added, we are just going to add a single line of code:

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

Dynamic_sidebar is a function provided by WordPress which allows you to display a widget area. Simply pass it a name, and any widgets in a widget area will be automatically displayed wherever the code was placed. Now it’s time to start adding to the page.

Adding Widgets to the Page

With our widget area all set up, the only thing left to do is actually start adding content. Login to the WordPress dashboard and navigate again to Appearance -> Widgets in the menu. You will see your new 404 Page Widget Area on the right side. On the left side, you will see a list of widgets you can use.

My theme already includes a search bar and navigation in the header and search in the sidebar, so I don’t need to add either of those elements. If your theme doesn’t include that, it would be a good idea to add a search widget.

Next, we’ll add some useful links. Let’s say I’m running a blog. I want to show a few recent posts so users can quickly navigate to the content they were trying to find. Simply drag and drop the “Recent Posts” widget to the 404 box and change the settings to match your taste. For me, I gave it a simple title and added 3 posts.

Configuring my recent posts widget

Configuring my recent posts widget

Next, I want to add a simple line of text with a link to my contact page. For that, I would most likely want to use the Text widget, which accepts plain text and HTML. I can drag the Text Widget to the 404 section, and add a very small block of text:

Can't find what you're looking for? Visit my <a href="/contact">Contact Page</a> to get in touch right away.

You can also use the Text Widget to add an image that makes the page a little more approachable. In the text widget, leave the title field blank, and use HTML to link the image up.

<img title="404 Page Image" src="http://yoursite.com/images/404.png" alt="404 Not Found" />

Make sure to replace “http://yoursite.com/images/404.png” with a link to the image you want to use.

If you are looking to add a few links, similar to GitHub’s approach, you may also want to consider setting up a custom menu, and adding it with the “Custom Menu” widget.

What you decide to add to your 404 page is up to you, but whatever you are trying to add, there is probably a widget out there that can help you. You can use bundled Elegant Themes “About Me” widget, for instance, in order to share some information about yourself. Simply link up a bio image and add a few sentences about who you are.

When you add content, just make sure that you keep it concise. Give users a few different ways to access your most important content, maybe add a brand image, and then get out of the way. With just a few sentences and a couple of links, you can ensure that users are getting a lot more out of your error page.

My 404 page is looking quite a bit better, and has all of the information my visitors need.

A Final Trick

I’ll leave you with a final pro-tip for those that want to experiment a bit. WordPress gives you access to quite a few query variables that can be accessed on any page. One of these variables is called “name” and contains the fragment of the URL after your site URL. So, if a user types in http://yoursite.com/404, the name query variable would return “404”. This can be useful to you in a number of ways.

The simplest example is to just inform users of the page they were trying to visit, so they can check it for a misspelling or error. On our 404.php page, let’s first retrieve this query variable. At the top of the page, just under the get_header function, store the name query variable.

<?php $name_var = get_query_var('name');  ?>

Then, we can change the Page Not Found header to include this information for users.

<h1><?php esc_html_e('Page /','Divi'); echo $name_var;  esc_html_e('/ Not Found','Divi'); ?></h1>

Now users will be informed of the link they were trying to visit right away.

Of course, this is just one idea. There is a lot more that can be done with this particular variable, like serving up search results based on the page’s URL, or using it to try and guess what the page might be. As you are adding content to your 404 page, it is worth keeping this in the back of your mind in case there’s a situation where it would help.

The 404 page is far from the most important page on your site, but if you put a little thought into it you can enhance the experience for your visitors, and make sure they stick with your site even if they receive an error. Hopefully, this is enough to get you started.

28 Comments

  1. Wow, this is a nice and detailed tutorial! I like to keep my 404 pages clean and simple. I usually just direct the visitors to the search bar and also put a link to the contact page. Not too fancy but it’s way better than the default 404 page of your server. 🙂

  2. Interesting. I started this project on one of my websites recently and I ended up just going with a plug-in that redirects back to the homepage instead of the 404 page (404 to Start). It was a quick fix.I will have to try something like this.

    But I would like to ask my fellow web designers here, what are your thoughts on being re-directed back to the home page instead of a 404 page? Do you prefer to see the 404 page or would it be a better user experience just to end up at the homepage?

    • Good question, Geno!

      There are pros and cons to both options, certainly. My preference would be to leave a 404 page. Being automatically redirected to the home page may appear as an unintended bug or effect to some web users. Leaving a 404 page with an explicit message leaves no doubt that the page for which they were looking does not exist (anymore).

      Another alternative might possibly be using a combination of both. Have a 404 page, but include a timed redirect to the home page. That way visitors know the page does not exist, and are conveniently redirected to the home page without any issues. I’m sure there are ways of implementing such a solution.

      Cheers!

  3. Long and informative tutorial. I don’t have any custom 404 pages for my blog. After reading your post, now I can easily create a custom 404 page for my blog. Thanks for the share.

  4. Great guideline with best step by step tutorials

  5. Great guideline with best step by step tutorials

  6. It is a great post and very helpfull…. but, I tried to do it changing the text of the paragraph and it doesn’t matter if I change the whole text or a single word, then the text doesn’t appeared in the 404 Page.

    It also happen if I change the text between the h1 tags, for instance, from ‘Page Not Found’ to ‘Página No Encontrada’

    Any idea why?

  7. Great post, this is very informative and helpful article.
    Thanks for sharing this post.

  8. Like your thoughts about setting up 404 page on child theme where you will not loose the changes while updates. Useful information.

  9. Nice post, just updated my 404 page and it was super easy. Never thought it would make a difference but I like it. Thanks

  10. Great detailed post. A bit too technical and over my head personally, but I totally agree with the premise and concept. I found a site that helps easily customize and ‘optimize’ 404 pages – http://www.better404.com. I think it’s much simpler and all you have to do is load some script onto your 404.php file. It even populates suggestions based on what the requested URL.

    Here’s how it looks on my WP site when an error page pops up for a mis-typed URL to the pricing page: http://bit.ly/1qld4ur

  11. Hi! Is there any possible way to override the 404.php behaviour and customize this 404 page from within your page list, and of course, using the Divi builder?

    Thanks!

    • This is a great in-depth post Jay, thanks!

      Like Marcelo I thought it would be great to have an easily customizable solution, being able to use the page editor (and page builder with divi). After digging and playing around for a while I got it figured out and am now able to fully customize the 404 page using the page builder (of course keeping in mind the great guidance in this post).

      One thing to remember is to set the page as ‘nofollow’ and ‘noindex’ to disallow bots from crawling the page and indexing it in search engines.

      • Trying to post code again….

        <?php get_header(); ?>
        <div id=”main-content”>
        <div id=”content-area” class=”clearfix”>
        <?php $recent = new WP_Query(“page_id=2199″); while($recent->have_posts()) : $recent->the_post();?>
        <?php the_title(); ?>
        <?php the_content(); ?>
        <?php endwhile; ?>
        </div> <!– #content-area –>
        </div> <!– #main-content –>
        <?php get_footer(); ?>

  12. I followed your instructions, but when I tried to add “Text” to my new 404 sidebar widget area sand save it, it disappears.

    For some reason, no matter what I add refuses to save. Any ideas why?

  13. Thanks for the article. I am particularly interested in the use of Widgets across the page (horizontal) instead of the traditional vertical. So this was a very handy guide to getting started.

  14. Hi,

    thank you for this nice article. So, is it not possible to put a plugin to redirect to a 404 error page made with Divi?
    I’ve tried this in my web: I did a 404 error page with Divi, and then I’ve installed the plugin “404 to start” pointing to that page. But the problem is the standard Divi 404 error page is still showing. Should I delete the 404.php file?

    Thank you.

  15. In the discussion: Setting up the Widget Area

    .”…. Elegant Themes makes it dead simple to add new widget areas to WordPress. All you have to do is go to Appearance -> Widgets in the WordPress admin. At the bottom of the right sidebar, you’ll see a box which lets you create new Widget Areas….. ”

    I beg to differ:

    I’m using ET’s eBusiness theme and no such box for adding new widget area exists. It appears not all of the ET themes do make it easy.
    Which leaves some of us back to the manual method of coding the function.

    Tried using an ajax plugin once, but it didn’t place nice with the ET theme. Actually found that coping over the 404.php to child theme and making a few edits is the quickest way to improve the page.

    Adding a little robustness will take some time, thanks for all the ideas.

  16. I actually had to copy over the “no-results.php” page to implement a custom 404 page. Don’t know why except that this the true page that Divi goes to when search results turns up a blank… Still trying to add my custom sidebar, but it shouldn’t be too difficult 😉

  17. Hi, Thanks for a great post and some really useful links. I’ve made a child theme, at last!!
    I’m using Divi on our main site http://www.systemed.co.uk and I’ve made a completely seperate subdomain (not multisite wordpress) for my own blog.

    The 404 plug in is working fine within this subdomain but I have an odd problem. The display also appears in the footer of the page as well.
    Here’s a dodgy page so it goes to the 404 page
    http://systemed.co.uk/mikesblog/junk

    I had initially made the 404 file in the main theme but then had a go at a child theme. In the main theme area I have renamed the 404.php file to not404.php

    I’ve re-read the instructions but I can’t see where I’ve made any errors. Is there anything you can suggest?

  18. Ha!! Found the solution to my problem above.
    I had made a mistake and had two copies of this line.

  19. Great article, but I can’t seem to find what I was looking for.

    Is there a way to change the default css configuration for the results page, like other pages built with page builder?
    I’m using Divi with a white transparent logo and white navigation menu text on transparant backgrounds. But the resultspage defaults to black navigation with white background and my transparant white logo isn’t visible anymore.

    Is there a way to change this? Hope you can help, thanks in advance!

    Jack

    • Nathan B. Weller

      Hi Jack, sorry you’re having difficulty with that. We’d be happy to help. However, the best place for us to offer up customer support is in our support forum. That way we can track the progress of your ticket and make sure you get the help you need. http://elegantthemes.com/forum

  20. Hi thanks for the tutorial – this worked on my divi theme if I put in the content area, not at the end of the block of code. When I put it at the end of the block of code, the widget area was below the footer. Also, was wondering how to make the 404 page full width? Cause now I have a widget area with a sidebar…

    • I am trying to make the 404 page full width as well. Did you happen to figure it out? Thanks.

  21. I just want to ask about mobile wersio. There where is menu – is a number phone. There is chance in mobile version after click “number” to automatic call?

  22. Interested in making it full width also, anyone figure it out? Thanks!

437,821 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest