Create a custom 404 error page in 10 minutes or less

No one likes surprises.

Landing on a page which brings up an error is no one’s idea of fun.

And as a business owners, you don’t want to give traffic away.

You’ve worked hard to build momentum with your site, and when people arrive there, you want them to find what they’re looking for.

So if they show up on your website and are hit with an error message, it’s fairly irritating for them, and pretty heartbreaking for you. Because they’re unlikely to hang around.

But what if there was a way that you could fix that?

None of us are invincible, and particularly if you have a large website, you will likely have an occasional broken link here and there. That’s life. Don’t be too hard on yourself – even the best sites have the odd error.

But what if you could ensure turn that to your advantage – see it as an opportunity rather than a reason to berate yourself?

Here’s how.

When your visitor lands on a page which doesn’t exist on your site, they’re faced with a dreaded 404, ‘page not found’ error message.

It looks something like this.

We’ve all seen them. They’re not pretty, and we tend to just hit the back button and go elsewhere.

It’s a bad user experience, and search engines sense that too, as they realise that visitors are bouncing off your page, so they’ll be sure to minimise the amount of people that they drive to that url.

Bad news all round.

So what is that 404 error page?

Your 404 error page is the default page on your website which appears when someone arrives on a page which doesn’t exist.

There are a number of reasons why these pages can rear their heads, but mainly it’s because a page has been deleted, or the link has changed.

Whatever the reason for the error, you need to let your site visitor know, in a really friendly apologetic tone, that the page they are looking for no longer exists.

Usually, a website owner will direct them back to the home page.

This is a pretty lame option.

What you really want to do is use this as an opportunity to engage the visitor and direct them to something of value on your site – a free opt in, or an opportunity read a terrific case study. Something that’s likely to catch their eye, and keep them on your website.

When done well, these error pages have the capacity to become mini-ambassadors for your website and go a long way towards reversing any potential frustration.

I use a bit of humour on the 404 on my site to try and appease a possibly irritated visitor. I use a photo of a screaming cat with the text:

Arrrrrrgh!

It looks like you rubbed the genie up the wrong way. Or you just discovered a broken link.

I’m really sorry but the page you’re looking for has moved or no longer exists.

Can I make it up to you? Schedule your free 30 minute Website Jumpstart call with me so I can give you some amazing tips on driving traffic to your website, and you can bend my ear about my poor link admin.

And I also present them with my 3 latest blog posts.

What should you include in a 404 page?

• Give visitors a few different ways to reach the content that they were after in the first place. Do this in the form of a search field and ensure that your main navigational links are visible on this page
• Provide your visitor with an apology and some useful information
• Link to support or a way to contact you in case they can’t find their way around
• Add links to popular content on your site, such as popular blog posts
• Add a bit of personality that takes the edge off the mistake

Great examples of customised 404 error pages

There are some really terrific examples of creative and engaging 404 error pages which you can use as inspiration. Here are a few that I stumbled upon and liked.

Mailchimp

Always quirky and full of character, Mailchimp don’t disappoint with their error page of a chimp lost in the jungle.

South West Trains

Very apt and relevant to their audience, this is a great illustration of a creative error page.

Hot Dots Production

Showcasing their technical capability, this 404 page is somewhat addictive in nature. Go ahead and click on one of the digits and see what I mean.

How to create a custom 404 error page on WordPress

So this is all very well and good, but how do you actually go about creating one of these magical pages?

There are 2 ways – the ‘roll your sleeves up and get stuck into WordPress templates’ way which is great for anyone who is comfortable with tinkering under the engine, or the plugin way.

If you’re remotely lacking in WordPress confidence, jump straight to the second method – it’s what I use as it’s just easier.

1. Using the WordPress 404.php file

Every theme that is shipped with WordPress has a 404.php file. But not all these themes will have their own custom 404 error template file. If they do, it will be called 404.php andWordPress will automatically deliver that page by default if someone tries to access a page which no longer exists.

The normal 404.php page shipped with your theme will work, but it may not say what you’d like it to, and is unlikely to offer an opportunity to direct the visitor to other areas of the site. If this is the case, as it likely will be, you will need to alter the template file.

You can do this by editing the template file in your favourite text editor, and change the message to whatever you’d like. You then save the changes and upload it to the theme directory of your WordPress install.

Many of us who don’t like delving into code and template files would prefer a simpler option. And luckily, there’s a trusty plugin to help us out.

2. Create a custom 404 error page with a plugin

This process couldn’t be more straightforward.

1. Download the 404page plugin.
2. Create a new page in WordPress in the usual manner and customise it as a 404 page. You can use a featured image in the usual way, or custom fields.
3. Publish the page.
4. Go to ‘Appearance’ > ‘404 Error Page’
5. Select the new page which you just created.
6. Test your page from the front end of your site and make any adjustments as necessary to the page in the normal way.

Checking for broken links

However simple and no matter how much fun your error pages can now become, it’s still important to minimise the chance of someone landing on it.

There’s a nifty free tool called http://www.brokenlinkcheck.com/ which enables you to type in your URL and it will check your website for dead or broken links.

I just ran through this exercise now, and was surprised at how many of my blog posts are pointing to external pages which no longer exist. So I need to go through and remove or change those links.

How to fix broken links

Clearly, it’s no problem to amend broken links within your own website, as you can simply change the url that they point to, but you don’t have any control over the links that other people are using on their website.

You could possibly contact all the webmasters of those websites, and ask them to change the links, but there are no guarantees that they will, or how quickly they will do it.

So you need to find a way to do it yourself.

You do this by redirecting traffic from a page which no longer exists, to an existing page.

In order to do this, download the plugin called Redirect, and simply paste the old url (which no longer exists), and the new url which the traffic should now go to.

This will fix the problem of people arriving on a page which you have recently moved.

In summary

So there you have it.

Try to minismise the traffic being delivered to your error pages through checking for broken links, and redirecting them accordingly. But for those which slip through the net, create a custom 404 error page and use your own branding, tone of voice and desired end outcome, to guide the visitor to something useful on your site.

If you want more tips about creating, improving and marketing a WordPress website, join my WordPress Happy Community for free.