How to create a custom 404 page in WordPress
It’s never a good thing when a link leads a visitor to a page that no longer exists. There can be disappointment, confusion and a U-turn with the visitor leaving your site post-haste. Fortunately, there’s something you can do about it to make the situation less jarring, even humorous if that’s your style. All it takes is replacing the generic, sterile default page not found error page (aka 404 page) with one that’s actually helpful. In this post, I’ll explain how to create a custom 404 page in WordPress.
Turn digital dead ends into signposts for your users — and even throw in a little humor — by creating a custom 404 page.
A generic 404 page will look something like this:
While this is a dead end, you can turn it into a signpost guiding the way instead. Throw in a little humor and your visitor’s groan will turn into a laugh.
Here’s one from Airbnb that does both: visitors get a funny graphic for their trouble and easy links to what they might have been looking for:
Some theme builders include a custom 404 page and others do not. To get an idea of how your theme is handling errors, type in a nonsense URL such as http://mysite.com/nosuchpage and see what comes up. If you don’t like it, there’s plenty you can do to change it.
How do you create a custom 404 page in WordPress?
When it comes to creating a custom 404 page in WordPress, you have several options:
- Edit your theme’s existing 404 page.
- Add a custom 404 page if your theme doesn’t have one.
- Use a 404 plugin.
We’ll cover each of these in detail below.
Note: When editing a WordPress theme, it’s best practice to work with a child theme. Otherwise updates to the theme might overwrite your hard work.
Editing your theme’s 404 page
First, check if your theme includes a custom 404 page. You can do this by opening the theme editor (Appearance > Editor) from the Admin dashboard.
In the list of files on the right side of the page, look for one named 404.php.
If there isn’t a 404.php, then your theme doesn’t include a custom 404 template and if you want one, you’ll need to add it (as described later in this article). Otherwise, you can simply click on the existing file and edit it right in the WordPress dashboard.
The meat of the 404.php that comes with Twenty Seventeen theme looks like this:
To change the page, edit the highlighted text. You can also add additional paragraphs below it (above the end of the page-content div), including any images and helpful links you’d like to add.
Creating a WordPress 404 page
If your theme doesn’t include a 404.php file, there are two easy ways to create one:
1. Copy the 404.php from another theme, such as the WordPress Twenty Seventeen theme (/wp-content/themes/twentyseventeen/404.php) into the directory of your current theme. Edit the page as described above.
2. Copy your theme’s index.php to a file named 404.php in your current theme. Delete out the parts related to the WordPress loop. Generally, this is the section that begins something like this:
<?php if ( have_posts() ) : ?>
and ends with:
<?php endif; ?>
Note that the exact syntax might be slightly different, but you’re looking for
endif. Then insert your custom code in the space you created.
The advantage to the second method is that you’ll likely get the formatting your theme uses throughout your site, so the styling will match.
WordPress 404 plugins
If you’re not comfortable editing your theme’s PHP code, you might prefer working with a plugin. 404 plugins will help you create a 404 error page, and often, as an added bonus, will track and record all page not found errors. Here are a few favorites:
This trim, carefully designed plugin lets you create your 404 page as you would any other WordPress post. You then go to Appearance > 404 Error Page and designate the new page as your 404 page. It also returns the correct error code to the visitor’s browser. More than 70,000 WordPress sites use this plugin and it’s loaded with 5-star ratings, so it’s an excellent pick.
Custom 404 Pro
The free plugin also lets you designate any page you create as your 404 page. In addition, it logs all 404 errors to a report you can review, so you can track down and squash as many as possible.
404 Page by SeedProd
This plugin helps you quickly and easily set up a custom 404 page in WordPress. It works with most themes and lets you completely customize your new 404 page. The basic version is free. A pro version, which you have to subscribe to yearly, offers additional features such as collecting the visitor’s email address.
There are quite a few additional 404 plugins in the WordPress plugin directory, but the above are proven favorites.
When choosing a 404 plugin, avoid those that return a 301 redirect code to the browser instead of the correct 404 not found error code. Since the page, in fact, does not exist, you should not be telling browsers that it’s been relocated.
Redirection can be very helpful in dealing with 404 errors, but it only applies when you can actually forward users on to the page they originally intended to reach. Otherwise, you should deliver up a nice 404 page.
Tips for a good 404 page in WordPress
If the default 404 message is bland and not terribly helpful, what should you include in its place? A good design will include:
- Design and branding that matches the rest of your website.
- A helpful message that informs visitors the page wasn’t found.
- Links to relevant pages on your site, such as the home page or popular pages, to encourage the visitor to stick around.
- Perhaps a humorous image or tone, if that’s your style.
An effective 404 page will help you keep your visitors from clicking away and encourage them to further explore your site. You should also track your site’s 404 errors and create redirects when you are able to forward users on to their intended destination.
A good custom 404 page changes a dead end into a doorway that encourages visitors to come inside and stick around. No website is complete without one.
The GoDaddy product information in this article is outdated and currently under review for accuracy. For the latest up-to-date product information please visit godaddy.com