Editor’s Note, January 2020: Are you using Divi? If so, click here for an easy way to customize your 404 page using the Divi Theme Builder.
Disclaimer: This blog is on the technical side. Still read it, of course, but bear in mind that it may require some more advanced WordPress knowhow.
What is a 404?
A 404 page will show itself when a user tries to go to a location on your site where nothing exists. Instead of just showing nothing, the user is directed to this filler page. It’s often quite boring.
This is the basic Divi 404 message without any styling. Bland, but it serves its purpose. Users on your site will not experience many other errors aside from the 404 if everything is set up correctly, but how can we stop them from seeing 404s? Well, you can’t. Whether it’s user error or an old broken link on your site, there is a sizable chance that someone is going to see your 404 page. If that’s the case, why don’t we give it a little personality so that it’s less of an eyesore?
How can I spice up my 404s?
To start, notice that the above message doesn’t have much by way of getting the user back to the site. People need to have their hands held a little bit, so try putting some buttons or a navigation panel that will serve to direct the user back to where they want to be. If you’re working with the Divi template, you will already have your primary navigation on your 404s.
You should also give the user something to be interested in or excited about on the 404 page. On our 404 page, we have our most recent blog posts. Having content like this on the page makes it seem like less of an accident and more of an opportunity to introduce to our visitor something they may have not noticed on our site before. You can also try using a call to action on this page for a hot offer or something you think needs some extra love.
Adding some flair to your 404 is also a great idea. Your site is a representation of your business and personality, and this idea should extend to every page – including that 404. Use some brand colors, and have fun with it!
Since you never really want users to see the 404, and you definitely want to know how a user got on that page, try having an option to contact the website administrator or support on the 404. Users will then be able to report the issue. If you’re thinking you need more, perhaps give the visitor a few reasons as to why they’re seeing this page.
While rules can be broken, especially in the name of creatively extending (but maintaining) your brand’s personality, below are some other general points to consider when designing your 404:
- Keep it simple, Stanley. The page should be fast loading and avoid complex scripts that could create additional errors for some users.
- Stay away from technical terms, the user doesn’t need to know why, but rather what to do next.
- Don’t blame the user. Never accuse them of typing in a wrong url, instead simply state that it can’t be found.
- Check your site regularly for broken links, missing posts, images, articles, etc. Then, fix them!
Creating custom 404s
So how can I craft a custom 404 page? It’s a little involved, but well worth it. There are also a number of plugins that can help with 404 page creation, such as 404page. If you don’t have as much back end knowledge, try playing with a few plugins to see if you can give some personality to your 404s.
We are going to be diving in to your theme’s 404.php file, so be sure to take a backup of your site before you attempt any edits! Your 404.php is going to look different depending on your theme, but below is a snippit example of the file, for Twenty Thirteen:
<h1 class="page-title"><?php _e( 'Not Found', 'twentythirteen' ); ?></h1>
<h2><?php _e( 'This is somewhat embarrassing, isn’t it?', 'twentythirteen' ); ?></h2>
<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentythirteen' ); ?></p>
<?php get_search_form(); ?>
<!– .page-content –>
The main things we will be looking at are H1 (‘Not Found’) and the page-content attribute (‘This is somewhat embarrassing…’). This is where the 404 message lives, and whatever is replaced here will display when someone misdirects. H1 is going to be your header, or the larger message atop your page-content. The page-content will fill in the body text.
Play with this file as much as your HTML expertise allows, and test it by going to a place on your site that doesn’t exist, i.e., mysite.com/thispagedoesntexist/.
Not only will your 404 page look much nicer, but studies have shown that an on-brand, engaging 404 page can actually help raise conversion rates!
Looking for even more examples? You can find them here https://hostingpill.com/best-404-page-examples/
Editors’s Note July 2, 2019 : While this post was written last year, the points are still valid. I just took a few minutes to add some additional details. The updated notes appear in bold, italic text above.
Style Your Divi 404 Page using the Theme Builder
If you’d prefer to watch a video on the topic, click here.
Divi 4.0+ now offers some brand new functionality out of the box which allows you to define custom headers and footers for specific pages, called the Divi Theme Builder. We are going to use this to create a new 404 page for your site.
You can find this tool by hovering over the Divi dashboard icon and selecting Theme Builder from the secondary menu. You should see something like the below.
The first step is to define where the template will be placed. When you click into the box with your new template, you’ll be asked to select which page(s) the template applies to. From here, we will select the 404 page. See below for a visual:
You can see the above has three portions: Global Header, Global Body, and Global Footer. We are only going to be dealing with the Global Body for the 404 page. Note that the Template will use the default header and footer if those sections are left blank, which is what we want in this instance.
Let’s go ahead and click into the body section. This should look familiar to you if you’ve used the Divi builder before. If you haven’t, sorry, I’m not going to go over that here, but there are plenty of great Divi resources for you to use on our Digital Toolbox platform. And of course there’s Google.
From the body, you can define your module-based content and save it out! Be sure to hit that second Save button on the Divi Theme Builder page, and you’re all set. Fantastic!