How to Create a Custom 404 Page in WordPress

None of us like to think that any significant amount of traffic lands on broken links on our sites. The fact is, though, there are a ton of reasons why it might. Maybe a typo in a link – on your page, on a guest post, or from someone with no interaction with you – makes a broken link. Maybe a redirect script fails and the user gets stuck on a page that no longer exists. Maybe some remnant of WordPress navigation code takes the user to the wrong page.

Sooner or later, someone is going to end up on a page on your site that does not exist. It’s up to you what you do to capitalize on that.

Why You Need a Custom 404 Page

A 404 page is something every site has, technically, but not many sites necessarily customize. Every web browser has a page they deliver to a user if there is no actual content on the URL they are given. If you were to visit some page like http://www.dfsalhasdhjbfe.com/, you would get a browser-based 404 page because the URL does not exist. Unless someone registers it just to mess with this post, which would be weird.

Now if you go to a page like “https://www.seoblog.com/dfhsdhaf”, you will find that you still resolve the core domain – SEOBlog – but not the subpage, which doesn’t exist. You get a basic 404 page, which has the top and sidebar navigation options, but no content in the middle.

See the difference? One of them implies that the site doesn’t exist at all, while the other acknowledges that the site exists but does not have that specific content.

There’s reason #1 why you should have a custom 404 page: it confirms to people that they’re on the right website, but a single page they may have been looking for does not exist. This is a lot better than throwing into question whether or not the site itself exists. If the user gets a browser-based 404, they might think your site is dead, and won’t bother coming back.

A custom 404 page also acts as a sort of soft-sell landing page. It’s not as focused as a landing page, and it’s not something you would ever use as the target of ads, but it does serve to help catch people who fall through the cracks.

Custom 404 pages serve to increase branding as well. A generic 404 page doesn’t bring any additional benefit to a user who finds themselves there, while a custom page at least carries the atmosphere of the site forward.

You can also use a custom 404 page to bring added benefit to any user. For example, you can replace the primary 404 content with a site search, so a user can use that search to find the actual URL of the page they were looking for.

You can also use a related posts plugin to dynamically generate popular links to other pieces of content on your site, or just used fixed links to link to evergreen posts you want to promote. Convert users who fell through the cracks into users who read other pieces of content.

If you find that a significant number of people are landing on your 404 page, you can even turn it into a lead generation landing page. It’s still a 404 page, and Google will still not like it as a landing page, but you might be able to squeeze a few customers out of it.

Though, if you do find a significant amount of traffic leading to a 404 page, you should probably figure out why. You might have broken scripts or broken redirects that you need to fix. You might have broken internal links, and if they’re passing that much traffic, you should fix them too. You also might have external links pointing to your site that are broken. If that’s the case, message the site owner to get them fixed; a broken link doesn’t pass much link juice, and someone else could come along and “broken link build” their own link in place of yours, poaching all that traffic.

A Note About Plugins

When you’re using a WordPress framework for your blog, you’re probably tempted to use a plugin to solve basically any problem you might have. That’s usually a valid option, and indeed, there are a bunch of different plugins that will allow you to customize your 404 page to a greater or lesser degree.

Before I begin recommending plugins, though, I need to make a note. You can’t just use any old plugin, because a lot of them aren’t SEO friendly.

See, the way most of these plugins work is by redirection. You create a page or a post that is basically what you want your 404 page to be. Then, when a user lands on a link that’s broken, the plugin takes over and redirects them to the 404 page.

When Google crawls your site, they’ll find your custom 404 page, but they’ll go through the same process. They’ll see a redirect, then they’ll see a 404. How do you think that looks?

That’s right: it looks terrible. Google doesn’t care that it’s a plugin making a custom 404 page; all they see is a broken redirect. That’s awful for your SEO. You want the 404 to be the first thing the user, or Google, sees when they land on a broken link. That way it doesn’t look like an error, just like a way your site works.

There are definitely some WordPress plugins for 404 pages that work in an SEO-friendly way, and I’ll recommend those next. Before that, though, let’s talk about the ways you can make a custom 404 page with complete control over the page, and no reliance on a plugin.

The Manual Way

WordPress, by default, uses a 404.php file for their 404 page template. Some themes don’t have this page, but most will, even if it’s not very customized. If that file doesn’t exist, you can create it. All you need is a .php file with the following text in it:

<?php get_header(); ?>

<h2>Error 404 – Page Not Found.</h2>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

In this text, you have a PHP call for the header of your site, a heading with the text of your error, a PHP call for the sidebar of your site, and a PHP call for the footer of your site. If you use a different framework, like Genesis, this code might not work, so you should check the developer documentation for whatever framework you use.

From here, you can customize the code however you want. If you’re not familiar with PHP and the way WordPress works, you might need to get your developer in on it. Now you just have to decide what you want to include. Do you want a clever image? How about some amusing text about how the content is missing, and maybe some creature stole it? You might want a site search, which you can use an embedded site search plugin to add. If you want to go all-in, you can even make CSS-based animations to make it dynamic.

For inspiration, I’ve included a handful of links to good 404 pages and a bit of description of why I like them.

Examples of Good 404 Pages

Here are a few good examples of 404 pages that can give you some inspiration to make yours better.

Cloud Sigma. This 404 page isn’t really complex; it just has some text, a back to home button, and their footer-based live chat if you have an issue and what to talk to someone about it. The chat integration is great; it allows a motivated user to report what their intended destination was, the source of the broken link, and when it was broken. Most people won’t do that, but even one report can give you the means to fix an issue you didn’t know you had.

Kualo. This is a much more interesting 404 page, with a full-on miniature version of Space Invaders on the page. You can click a link to go back, or you can play the game. Or, of course, you can click the logo to go to their homepage.

My main gripe with this is that it encourages playing around on the 404 page rather than taking action of any sort, which is a bit of a wasted opportunity. It’s also not a full game; there’s only one level, that repeats when you finish it, and there’s no score or penalty for losing. It’s really just a goofy game, which is interesting, but not helpful.

When you do lose, they reveal that a high enough score can actually get you a discount on their product, which is cool! However, the fact that you need to actually lose the slow and tedious minigame to even know there’s a prize for winning really puts a damper on it.

Dan Woodger‘s homepage has a decent 404 page that doesn’t have a lot going on with it except navigation. However, Dan is an artist and illustrator, and the 404 page is a showcase of a couple of pieces of his art. You can know if you’re in the right place because you’d probably recognize it.

Figma is a vector editor used for rapid prototyping and wireframing of products, GUIs, and apps. Their 404 page is a clever little integration of it, with the 404 itself made of vector points you can live edit. It’s sort of like a little demo of their product without explicitly being a demo. Plus they have all of their navigation links at the bottom, so you can go back and browse their site when you’re done playing with the 404 itself.

Airbnb, the couch-surfing app, has a pretty useful basic 404 page. All it really has is a big error code and an animated picture of a girl losing her ice cream in sadness. Then it has some links to common pages a user might want to find, like the travel and hosting pages, their search, and their sitemap.

Github, a code repository for geeks, has an appropriately Star Wars themed 404 page. It has the sign up and sign in bar at the top if you just want to log into your account, and a search at the bottom to help you find what you were actually looking for, so it works pretty well and serves its purpose.

So, for the most part, the order of the day is to be as useful as possible, and then to be as creative as possible while still being useful.

A Useful Plugin

If I had to pick one single 404 plugin to recommend, it would be 404Page. This particular free plugin doesn’t use redirects for its custom page. It allows you quite a bit of customization through the Page Editor in WordPress, so you can customize it as much as you would any other page on your site. You can choose featured images, set the title and text, add links, and so on. It doesn’t allow for dynamic animations or fancy coding, but if you want that, you need a custom page.

Really, though, it’s not actually hard to make your own custom 404 page from scratch. You might have to learn a little bit of PHP, but not much, and only how WordPress uses it. It’s really quite simple, and there are a thousand examples online you can copy and customize easily. What’s really important is that you have something in place rather than a browser error page, that’s all.

Looking for help with SEO for your business or website? We have you covered. Check out our comprehensive SEO directory to find the right SEO company for your needs.