Creating a Custom 404 Page

Who needs a custom 404 page? Everyone.
 
It happens to the best of us. You type in a URL or follow a link to a page you’re ready to visit, then BAM. You’re hit with a roadblock; the dreaded error page.
 
 

What is a 404 page, anyway?

A 404 page is a virtual roadblock of sorts. Website hosting servers typically generate a 404 (or ‘Not Found’) webpage any time a browser attempts to follow a dead or broken link. Sometimes this is due to a moved or deleted page, a mistyped link, or an attempt to visit a page that never existed.
 
Most standard 404 pages contain limited information, leaving a visitor feeling disappointed, lost, and without the information they came to your site looking for. Often they’ll leave your website and return to Google to find another source. And that’s never a good thing.
 
But you can capture the attention (and even the hearts) of your misguided visitors with an engaging 404 page – one that gives them some options, all of which have potential to benefit you and your business. And best of all it’s quick, easy, and free.
 
 

How to create a custom 404 page

If you’re not handy with code, you can hire someone to develop a unique 404 page for you, or, if you’re on WordPress.org you can do it yourself for free in about 10 minutes with a plugin.
 
There are several plugins out there to choose from. After doing some research on my own, I chose the free version of FortyFour.
 
 

Why I love this plugin
  • It’s $0 (you can upgrade to pro, but for now, the free version has all I need).
  • All 404 links visited on your sites are available on Appearance > 404 Page: Logs. Just head over there to see your 404 links and how many times the pages were viewed.
  • It’s light-weight, meaning it won’t take up a lot of space or slow the page load time down. It doesn’t load the unnecessary scripts, css, images and other links to 404 page.
  • It’s super easy to use. Make changes to your page in minutes, all from one dashboard.

 
 
Here’s how to make the magic happen:
 
 

1. Get the Plugin

Download and install the free FortyFour plugin.
 
 

2. Set it up

On the left sidebar, scroll down to Appearance. In the dropdown you’ll see 404 Page there. Click on it and it’ll open to something that looks something like this:
 

 
 

3. Customize It

You can easily change and edit your copy as you would on any other post or page in this area. For best results, make sure to keep it in line with your brand persona. Be creative. Write something that encourages clicking. You can invite them to visit other pages, take them to your blog, or even send them off to another landing page of your choice. Whatever you decide to write, make it efficient. Just a few sentences will do; You won’t have their attention for long.
 
*Note that this plugin automatically adds a link that lets visitors click their way to your home page, so there’s no need to include that option in your text.
 

 
Scroll down on the same page to customize text appearance and color, link color, etc.
 

 
 

4. Add an image

With this plugin, you’re able to choose between a solid background or an image. I highly recommend opting for the image. A captivating stock image is far more likely to grab and hold your visitors’ attention than a plain backdrop alone. As Kissmetrics puts it, “People no longer want to browse a website – they want to experience it.”
 
To help, I curated a big list of free stock images for you. You can find it right here.
 
Pro tip: Go to Unsplash.com and type ‘add typography’ in the searchbar and you’ll be gifted with plenty of images that have been kind enough to leave space for your text. This won’t work on most other stock image sites.
 
 

5. Get ready to share it with the world

You can view your page intermittently as you work by hitting Publish in the upper right hand corner, then clicking View 404 page. This will open to a live preview of what your visitors will see. Make sure to check it on your mobile devices to ensure your image isn’t covering the text, making it impossible to read. To check, simply type the name of your website then not_found, like this: themogulmom.com/not_found.
 

 
 
That’s it! Keep playing around and making changes until you’re thrilled with it.
 
Here’s what our 404 page looks like today:

 
A truly great 404 page will help you grab a potential customer’s attention and keep it, preventing lost sales and frustrated visitors.
 
If you’re hitting a creative 404, check out these fantastic error pages for inspiration.
 
 

Share a link to your new 404 page in the comments. I’d love to see it!

 
Know someone with a boring 404 page? Share this with them. Lets’ make the world a little more exciting. One error page at a time.
 
 

Follow

Melissa Bolton

Brand Therapist™ + Copywriter at Melissa Bolton
Melissa is a mompreneur and brand therapist™ providing neurobranding and conversion copywriting services to solopreneurs and micro-business owners looking to truly connect with their right people. Leaning on proven psychology principles, she helps clients create a brand presence that's not only explicitly unique, but highly memorable. She offers 25 years of extensive sales and marketing experience through her proprietary brand therapy™ methodologies. You can learn more about her and how she can help you grown your own brand, right here: MelissaBolton.com
Follow

Latest posts by Melissa Bolton (see all)

Previous

Next

10 Comments

  1. Brenda

    I’ll have to look and see if I have any 404 errors showing up. Thanks for sharing how to make a custom landing page for them.

    Reply
    • Melissa Bolton

      You’re welcome, Brenda. If you wind up making one, post a link below so we can check it out!

      Reply
  2. Lydia

    I followed directions! But now my site isn’t redirecting to this new 404 page, and I want to cry. 🙁

    Reply
    • Melissa Bolton

      Uh-oh! Did you hit publish? Activate the plugin? What’s happening?

      Reply
      • Lydia

        I did! It keeps taking me back to my OLD and incorrectly branded 404 page. Eek.

        Reply
        • Melissa Bolton

          Reach out to the developer via a ticket on the plugin page- They’re very responsive and friendly. I’m sure it’s a quick fix! Keep me posted 🙂

          Reply
  3. Lisa

    Thanks for the easy tutorial! I kept mine fairly simple and straightforward.

    Reply
    • Melissa Bolton

      That’s fantastic! Funny enough, I actually considered that very same photo! Well done 🙂 Thanks for sharing.

      Reply
  4. Sarah Nenni-Daher

    Great write up (and I’ll be grabbing FortyFour soon but just a note: I do not have 404 Logs on my WordPress.org (self-hosted), Genesis Framework site. I’m not sure what that’s a part of, but I don’t think it’s native.

    Just in case any of your other readers don’t have the 404 Logs as well, it’s easy to find them.

    Go to Search Console (formerly Google Webmaster Tools) > Crawl Errors > Not Found (they’ll show in the bottom graph with a 404 error).

    Thank you again for this write-up on how to quickly (and painlessly) add a custom 404 page, Melissa!

    p.s. LOVE the ostrich!

    Reply
    • Melissa Bolton

      Thanks so much for your added insights, Sarah! Glad you enjoyed the article 🙂

      Reply

Submit a Comment

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

Pin It on Pinterest