How to Make a Custom 404 Error Page in WordPress

If your 404 error page in WordPress still looks like this:

Then your site or blog is leaking traffic, leads and money.

It’s time to plug the leaky holes and run this thing like it is a real business.

Keep reading and watch the video down below as I walk through the play-by-play of how to make a 404 page.  In WordPress, with Hostgator or with Godaddy – I’ve got you covered.

If you know all the basics then skip to the video and get it done.  But if you still have a few questions, then stick with me as I shed some light on what is an error 404 page, how to create or modify your own free 404 page and how to make changes to a 404 page in WordPress.

What is an error 404 page anyway?

Let me put it this way.

You want to make money on line.  You set up your blog like I showed you.  You set up a Facebook page.  You tweet from time to time.  You send out an email to your list when it seems right. And you are getting some people to click on the link to your most recent stuff.

• You’re posting your link on Facebook your profile, your business fan page, a few relevant groups.
• You’re posting it on your Google+  account. (You’re not quite sure if anyone is seeing it but you do it anyway…)
• You added it to your linked in groups (I don’t.  I personally hate LinkedIn.  It is not attractive.  And so text based.  Needs  more pics and jokes…)
• You tweeted it to your followers.
• You entered a comment on some lucky dog blog and you linked to your post.
• You tell a friend on the phone. (The friend is driving and will try to recall it when they get home, pull off their shoes and grab a soda from the fridge.)
• You buy some traffic in a coop or from a supplier. (Yep, the guy who you have never spoken to but you have traded 3 emails with.)

And guess what.

On the Internet your stuff must be perfect. One missing or wrong character and your potential customer ends up at a dead end – the 404 error page for Page Not Found – the internet equivalent of a brick wall.

No stunning content, no wow pics, no witty jokes or problems solved.  All that work and nothing.  The traffic is draining out as fast as it it flowing in.

Just a error 404 page.  You got the domain right but the blog post or page title was off.  Just by a bit .  One stinking little character. Son of a @#$.

From time to time, something goes wrong.  For example I have a page named http://www.empoweredspouse.com.dream.website/leadpages-net-review-clay-collins/.  But my wanna-be-visitor types in empoweredspouse.com/leadpages.net-review-clay-collins or whatever.  We all make mistakes.  It happens.

And they end up staring at a blank wall.  What do you think they are going to do when they run into your boring 404 error page?

They are likely to back up, close the window or go back to watching funny cat videos on YouTube.

All of these are bad news for you. Like I said, you just lost a visitor, a lead and maybe some money.  What if you paid for a solo ad and they got the link wrong.  You just wasted a lot of money!

Somebody tries to remember the title of your blog post rather than copy and pasting it.  Oops.

Instead of the drab default message that I showed above, wouldn’t it rock if they actually got an apology, if they got a bonus for just showing up on your domain at all and if you got their email address.  It sounds like a win-win (I really hate it when people say that).  So let’s say that everybody got theirs.

What if you could learn how to make a 404 page that actually offered a bonus and highlighted your best stuff?

Are you gonna limp along with the same old tired 404 page like everyone else or are you going to suit up like the ninja blogger you know you can be?

I’m all about ninja mode so let’s rock.

I’m gonna show you a free version that you can create right in WordPress with very little coding yuckiness and then I’m gonna show you how to make a really sleek one in that Leadpages.net program that I mentioned above.

Get this and then follow along below.  Check out my review here and see all of the other lead capture pages that you’ll be able to rock in minutes.  But right now, let’s focus on the plugging this leak on your blog.

Review 404 Page Examples.

First, let’s see what we’re working with.

If you are using a WordPress site, you probably have a default 404 error page.  Do you know what it looks like?

Type in www.yourdomain.com/ninja.   Unless you have a page named ninja, your should see your 404 page. What do you think?  Snore…. Don’t be vanilla.  Be bold!

Visit major websites like Aweber, GetResponse, InfusionSoft, Google, Apple or some of your favorite sites.

As you will see, some pages send people to an oops page.  Some of them make a joke. Some hope that the visitor with search again and others just let the 404 error page warning stand out like high beams on a country road.

Lesson #1: Avoid the default plain text 404 error. Customize it. To. Something.

Your visitors will be surprised that it looks like you actually put some effort into it and they might be a little impressed that you are really interested in helping them find an answer to their problems.

Ninja Tips:  How to Make a 404 Page That Keeps Visitors On Your Site

Next, decide what you want your page to be able to do.  Consider these options.

1. Add a search field.  If they can remember a keyword or two, they can still get where they are going.
2. Show some recent posts or some of your most popular posts.
3. Take them to a home page or most recent post or a lead capture page.
4. Give them a bonus. Go above and beyond. Offer them a stellar bonus in exchange for their trouble.
5. Add an image that relates to your site and your target audience.  Or one that you think is funny.

Check out my 404 page.

Notice how I turned my 404 redirect page into a net.  Instead of losing traffic, I am recapturing, entertaining and redirecting that traffic.

I can turn lost visitors into leads and customers with this sleek 404 lead capture page.  I added multiple choices with great images.  I send them to lead capture pages when it feels right.

Lesson #2:  Just get them back into your stuff.  Keep their attention long enough to engage them on another page of your site.

Free! How to Make a 404 Page in WordPress

Now that you have some idea of what your page will do and look like let’s get to work.  (I am using Thesis theme, version 1.85).  You may have to tweak the directions if you are using something different.I will show you how to do what I did on my page.  Add a dash or two of creativity and your page can be surprisingly good as well…

1. Open your WordPress Admin area.
2. Create a page.  Use this for testing the appearance of the content for the 404 page and to swipe the html coding from the text mode.
3. Select a top image to use to let the visitor know what’s happening (404 page, you know)
4. Select the posts that you want to link to – make a list of the exact URLs
5. Select and re-size images from each post or select new images.  If your are looking for some good free (and legal) images, check out this post.
6. Create a list and form in Aweber (auto-responder) to catch the leads. (If you are going to include a capture form or link to a capture page).
7. Edit the page with the title and all of the content that you want displayed. Add hyperlinks as needed.  Add form coding as needed. Save as a draft.
8. Open another browser window with WordPress admin.
9. Find OpenHook plugin, install and activate it.  This plugin lets you edit hooks in Thesis without actually needing to know much about hooks (I think of them as sections of code that control a small part of the site) or php coding and headaches like that.  I learned about OpenHook in this 404 page blog post after reading a few with a lot of coding instructions.  I was completely turned off by the geekery.  So this is way easier. And makes room for some cool images.
10. On the left-hand menu, go to Settings and select the themes that you want to apply changes to.
11. On the left-hand menu, go to Appearance, select WordPress Hooks.
12. Then select the proper tab across the top.  Then select the proper hook from the drop down menu.
    • thesis_hook_404_title
    • thesis_hook_404_content
13. Go to text mode on the draft page that we saved in Step 7.  Copy all of the coding for the title.
14. Paste the coding in the thesis_hook_404_title box.  Check the box to “Remove Thesis default 404 title.”
15. Go to text mode on the draft page that we saved in Step 7.  Copy all of the coding for the content.
16. Paste the coding in the thesis_hook_404_content box.  Check the box to “Remove Thesis default 404 content.”
17. Click the Save Button
18. Then open a new browser tab and go to a non-page on your site like http://www.yourdomain.com/ninja
19. Make changes to the page, copy the changes to the hook box, save and view until it looks the way you want.

Lesson #3:  Build it and Test it.  Make sure to go all the way through to testing the autoresponder form and list.

Sleek but Not Free! How to Make a 404 Page in 5 Minutes in Leadpages.net.

1. Get your domain you want this applied to (I’m doing this on a WordPress blog hosted on GoDaddy).
2. Create a list and form in Aweber (autoresponder) to catch the leads. (If you are going to include a capture form or link to a capture page).
3. Get this software and head to the 404 Page.
4. Make a 404 Error page that accomplishes your goals. Connect it to your auto responder.  This will take about 1 minute.  Yep. It’s that fast. Save.
5. Install the free plugin with this software. ( If you purchase through my link, I have a bonus video that shows you how to do it.)
6. Tell the plugin on the WordPress blog which capture page is the new 404 page for the site. See the 404 page that I created.
7. Test it.
8. Feel good that you are not throwing away your traffic.
9. Pat yourself on the back for a job well done.
10. Check out everything else that you can do with this program.

When you purchase the software through me, add a comment to this post and let me know that you purchased and I will send you my bonus training videos to help you make the most of the program.  I show you how to:
1. test many different lead magnets without needing to manage multiple lists and email series
2. Add pages to WordPress, your own domain, Facebook or leave on the leadpages domain
3.  Upload custom backgrounds specifically targeted to your niche. And more.

Wrap Up:  How to Make a 404 Page

1. Customize the existing text using OpenHook for Thesis.  Add images, videos, links to popular posts or link to your home page. For free.

2. Sign up for this, create your 404 page with custom graphics, backgrounds and text in minutes. And have the ability to create custom landing pages, webinar registration pages, thank you pages and more in unlimited domains.

Lesson #4:  Set yourself apart from the crowd.  Always.  something as simple as a 404 page might be overlooked but make sure that your reader is always having the best possible experience.   Substance and content is important but presentation matters too.  Take everything to the next level.

Looking for a way to learn dominate Google and work with me, learn how to partner with me here.

Your “Next Level” Leader,

Niquelle Wright

P.S.  Find out how I use a handful of free tools to get 15 leads a day without sending a dime on marketing.  Plus get my best posts and tutorial videos sent right to your email by entering your address below.