Create a custom 404 error page in 10 minutes or less

on 15 March 2017

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.

Vicky Etherington

Vicky Etherington has been running her own online marketing agency since 2003, and in 2014 transitioned to working with coaches and therapists to teach them how to create their own client-attracting websites. 

Become Part of
The WordPress Happy Community

Join 1300 other service-based entrepreneurs
who are empowering themselves to DIY their WordPress websites and online marketing with confidence.

If you want to accelerate your website journey, side-step all the tech meltdowns, and create your own  client-attracting website from scratch, join my Rock That Website. You’ll get a proven step-by-step roadmap to build your own successful site with confidence.

b
Posted in: Wordpress tips
Tagged as: 404, error, Wordpress

Related Articles

Making changes to WordPress without publishing them

Making changes to WordPress without publishing them

Ever wanted to change your theme? Revamp your entire website? Tweak that nasty footer? But you don't want to mess with your existing site, in case people are visiting your pages. In which case, you're in the right place! If you've ever wanted to make some changes to...

6 WordPress Plugins To Help Optimise Your Website

6 WordPress Plugins To Help Optimise Your Website

  6 WordPress Plugins To Help Optimise Your Website There are many advantages to using the WordPress templates to build your website on. Especially as most of the templates are mobile and SEO friendly. However, the templates don't cover all the optimisation...

How to choose a WordPress theme

How to choose a WordPress theme

Avoid the overwhelm of choosing a WordPress theme  Day in and day out, we're bombarded with too many choices. I don't know about you, but I don't necessarily want to make life-impacting decisions on a regular basis each day. And where you may think that's a little...

What is a WordPress child theme – a simple explanation

What is a WordPress child theme – a simple explanation

So you have your Wordpress website all sorted, and are pretty happy with the result. It looks great, and you're starting to get comfortable making your own changes and adding blogs posts. Then some smart Alec starts chiming on about a WordPress child theme and how you...

Join the Discussion

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin
Reddit
Pocket
Share
Share
Email