How To Create Custom WordPress HTTP Error Pages

At this point, you can enter in as many links as you’d like and have them redirected to either a customized error page, homepage, new page — anything!

There are other options out there, like our broken link checker plugin.

The main thing is fixing the problem before you have one. Whatever works best for you to discover broken links, redirect them, or fix the page.

SEO What?

Broken links can be bad for SEO. Google mentions that having 404 errors won’t necessarily harm your SEO but it can harm your user’s experience.

This can result in poor performance, and obviously a high bounce rate.

Search engines are always working on improving the user’s experience, so keep in mind, if it’s bad for the user, it’s probably not going to be great for SEO.

Why Create a Customized HTTP Error Page?

Now that we’re familiar with HTTP error pages, how they happen, and what to do to fix them…

Let’s focus on creating custom error pages, so when the inevitable does happen (type, anyone?), you’ll be ready.

That’s where customization comes into play.

Think about it. Would you rather see this:

404 - file directory not found.
Can it get any more lame?

Or this:

Amazon 404 page not found.
Who DOESN’T want to see a cute dog?

Or, you might recognize this one:

WPMU DEV 404 error page.
Even Dev Man sometimes gets lost.

If you liked the first example the most, well, we might not be able to help you here.

However, if any of the other examples stuck out, then now we’re getting somewhere!

Hopefully, you can see that if you have a 404 error page, it doesn’t have to be drab and boring.

That’s why having a customized 404 error page is important. Though it’s not exactly where a user wants to be, it doesn’t have to turn them off to your site, either. In fact, it can be engaging!

As Amazon and our example above for WPMU DEV demonstrate, it’s easy enough to get creative with error pages and add a useful call to action.

For Amazon… you can meet the dogs of Amazon. How cool is that?

And for us… you get a chance to see Dev Man from behind (it’s a stretch, I know), and you can head back to the home page from there.

Overall, they offer solutions instead of a complete stop, like other generic 404 messages.

Here’s a Toast to Having a Good Host

The backbone of ensuring that you don’t get error pages in the first place is having a good host.

This ensures your site is up-and-running to begin with. It’s also essential to have good speed and performance.

We offer hosting that includes dedicated memory, CPU, and SSD storage resources, which means these resources are independent of any other sites (even other sites hosted with us).

Plus, our hosting is optimized for WordPress, with object and page caching, IPv6 support, and our CDN — which ensures our sites are faster than a speeding bullet (actually, much faster).

This helps with any lag time, waiting, slow page loads, and more that can cause your site to time out and get a 504 error.

Let’s Get Set Up

If some of your goals include keeping a user on your page, having visitors return, keeping your SEO in good standings, and not turning-off users — then a customized HTTP error page is an essential part of your WordPress website.

There are several ways to go about doing this in your theme with code (and we have an article on how to do just that). However, since the arrival of Gutenberg, the simplest way is with a plugin.

T-error-ific Error Page Plugins

Plugins. They can solve almost any problem with WordPress in a snap. And that’s definitely true with creating a customized HTTP error page.

I’ll briefly be going over several free plugins that can help you create, customize, and implement amazing HTTP error pages.

Each one of these has over a 4-star average review, is free, and has over 5K users.

You’ll notice some of them will redirect your page, some won’t. However, each of these has a customization option for an error page.

You’ll discover for yourself what plugin works best for your website.

  • This plugin has over 100K active installations, making the 404page from Peter Raschendorfer one of the most used plugins for creating customized HTTP error pages in WordPress. It ranks up there as well with a solid 5-star average review.

    The plugin works with almost any theme, where you’re able to customize the error page to match your voice and style.

    It’s extremely simple to use in terms of design, display, and functionality. It’s all achieved in the WordPress page editor under 404 Error Page.

    One difference between this and others is it does not create redirects. A correct code 404 is delivered instead.

    That tells search engines that the page does not exist and has to be removed from the index. It also doesn’t create additional server requests.

    For being one of the most popular HTTP error plugins out there right now, it’s worth checking out for yourself.

  • The Custom 404 Pro by Kunal Nagar is a simple option that replaces the default 404 page with a custom page from the Pages section in the Admin panel.

    You simply choose a custom page, enter a custom URL for 404, and that’s it.

    This makes it easy to create your own customized page for 404 errors and create any type of amazing page your heart desires.

    With over 9K users and an average 4-star review, it’s not too shabby of an option. It’s frequently updated and has full support on Github.

    This plugin is a nice option for ease of use and to have total control of whatever type of 404 page you want to feature on your WordPress site.

  • All 404 Redirect to Homepage by Fakhri Alsadi is a simple solution to handle 404 error pages by using 301 redirect.

    It solves errors by redirecting all 404 error pages to a home or customized page.

    It’s a terrific plugin for a quick solution (redirecting to your homepage) while you work on building a customized 404 page.

    This is a popular plugin, with over 200K installations and a solid 4.5-star average review. It’s also updated regularly and has an active support forum.

    It features an error rate graph that demonstrates any errors on your website.

    You can also enable the 404 redirection status and where to redirect them to with just a simple click of a button on the dashboard.

    With the ability to redirect any errors, creating customized error pages, and support, this plugin is a top-notch choice.

  • 301 Redirects – Easy Redirect Manager by WebFactory Ltd allows you to create and manage 301 and 302 redirects, which will help your WordPress site improve SEO and the user’s experience.

    It features a user-friendly interface, simple installation, and is well organized in terms of setting up.

    It’s great for new WordPress sites, repairing links after reorganizing existing content, and for when your site’s content expires and you want to avoid sending visitors to a 404 page.

    This plugin has over 80K installs and an awesome 4.5-star average review. It’s also updated on a regular basis.

    Some of the features of the 301 Redirects are the options to choose from pages, posts, custom post types, archives, and term archives from the dropdown menu.

    You can also set up your own custom destination URL.

    It also allows you to retain query strings across redirects, import/export features for bulk redirects management, and simple redirect stats.

    It’s perfect for replacing an old site design with a new one, overhauling, or reorganizing your WordPress content, and if you have content that expires and you’d like to redirect users to a different location.

  • Redirection by John Godley is the most popular free redirect plugin for WordPress.

    You can simply manage 301 redirects, keep tabs on 404 errors, and even redirect if the user is logged in or logged out.

    It’s designed to be used on sites with a few redirects to sites with thousands of redirects.

    It’s the oldest out of all the plugins (over 10 years!) and has a million+ installations and a thumbs-up with a 4.5-star average review.

    Some of its features include redirects for certain browsers, cookies, HTTP headers, and more; meaning that you can really customize what redirect actions you want to take.

    It also has a configurable logging option, which allows you to view all redirects occurring on your site, including information about the visitor, browser used, and the referrer.

    With full support and all the features, this plugin is great for any WordPress site and creating HTTP error pages that you can redirect to.

  • 404 to 301 – Redirect, Log and Notify 404 Errors by Joel James is a simple plugin that handles all 404 errors.

    It redirects all errors to any page you’d like, using 301 or any other status you’d prefer.

    This leaves zero 404 error reports in your webmaster tool dashboard, making you and your WordPress site happy.

    This plugin has over 100K installs and a sweet 4.5-star average review.

    Some of the features include setting custom redirect for each 404 path, it’s translation ready, enable email notifications, and is known as developer-friendly.

    There is full support, regular updates, and very detailed information on what all this plugin has to offer once activated.

    Oh, and by the way, the creator of this plugin works for us! Hi, Joel!

Putting It All Together

There was a lot to comb over in this article when it comes to setting up customized HTTP Error pages. So, here’s a quick recap to get your error page error-free (boy, that’s a lot of errors).

You now know what an error page is, the different codes (and what they mean), what causes them, why to fix them, the importance of them, and how to create them with the help of a plugin.

Plus, you want to ensure your site is in good working order with some solid hosting.

And to wrap things up, keep all of these tips in mind:

Redirect: Instead of taking a page down, you redirect to a customized page (or homepage).

Keep Tabs on Your Pages: Remember to check with SmartCrawl or other sources to ensure you don’t have any broken links.

Remember Your Updates: Updating or changing any links? Be sure to ensure they’re not going to break any other links in the process.

Make Your Error Pages Human: On your customized error page, be sure to give them a personalized voice that works well with your brand or image.

Don’t make it generic and also include a call to action (e.g. “Click here to visit our homepage.”).

And Error You Have It

Now, when a user comes across something of interest on your site, but you forgot to redirect the page or re-adjust things, they won’t get the bland 404 messages.

Instead, they’ll be happy, possibly amused. Why? Because you’re prepared.

You created an amazing, entertaining, and informative custom error page that leaves them feeling happy — not disappointed.

Your user knows that you’re on top of your website and will understand.

They won’t be eager to leave and go elsewhere — even if they can’t learn about a talking giraffe.

Related Articles

Leave a Reply

Back to top button