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
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.
<article id="post-0" >
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.
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.
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.
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.
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 then 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.
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' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '
',
) );
}
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:
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
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 Contact Page 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.
Make sure to replace “https://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 https://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.
Then, we can change the Page Not Found header to include this information for users.
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.
The post Creating Custom WordPress 404 Error Pages appeared first on Elegant Themes Blog.
Comments
Creating Custom WordPress 404 Error Pages — No Comments
HTML tags allowed in your comment: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>