How to Create and Customize Error Pages for WordPress
Jenni McKinnon Jenni McKinnon   – December 20, 2016
13 Comments

How to Create and Customize Error Pages for WordPress

I’m a WordPress nerd and as a WordPress nerd, I hate seeing error pages on my site. It means I broke something, but at least I can fix it – visitors can’t and neither can yours, and that’s way worse than any error.

That’s why creating your own custom error pages, including 404 pages, can help make it easier for visitors who stumble across errors on your site and point them in the right direction.

Today, I’ll show you how you can create and customize your own error pages for WordPress with code as well as with plugins.

Create a WordPress Child Theme

Before you get started, you need to create a child theme to safely amend the current theme you’re using. That way, if you need to update your theme, your changes won’t be overwritten.

You can get more details on how to create a child theme by checking out How to Create a WordPress Child Theme and How to Automagically Create Child Themes in WordPress.

Once that’s done, you can start by creating a basic error page.

Create a Basic Error Page

If your theme already has a custom error page such as a 404.php file, you can copy it into your child theme’s folder under /wp-content/themes/your-theme-child/404.php.

If your theme doesn’t have a 404 error page set up, you can create one, but instead of creating an error page from scratch, you can copy your theme’s page.php file to your child theme directory under /wp-content/themes/your-theme-child/.

You can move the file and rename it using FTP or you can choose to accomplish this directly in cPanel. For details on copying and renaming files using cPanel, check out File Manager – Copying and Moving Files and Rename files.

Rename the file to reflect the type of error page you want to create such as 404.php or 403.php.

Customizing Your Pages

Now that you have a basic error page set up, you can customize it to your heart’s content and add helpful and relevant information to your visitors.

You can check out these resources for learning or brushing up on your PHP and CSS skills to create and style your error pages:

You can also check out File Manager – Creating, Removing, and Editing Files for details on how to edit files directly in cPanel.

Editing Your .htaccess File

Once you have your custom error page all set up, you need to tell WordPress to use the file you made for the corresponding error. This is done by adding an error document rule in your .htaccess file.

You can find your .htaccess file in the root of your site. Edit it to include a similar line to the example below:

Loading gist 3b6e9b330d27a1fb0891c4657d3a8b6b

Be sure to replace # with the actual error number, your-error-file.php for the real name of your document and directory with the actual path to your custom error file.

Also, if you change your theme at some point in the future, don’t forget to edit this line to include the path to the error documents for your new theme. Otherwise, your error page’s design and layout won’t match your theme.

If you created an error page, WordPress is set up to search for it and use it automatically when an error pops up on your site, but it doesn’t hurt to add it to your .htaccess file as a safety measure to be doubly sure WordPress knows where to find it.

Need some error page inspiration? GitHub has an interactive error page that is both fun and informative.
Need some error page inspiration? GitHub has an interactive error page that is both fun and informative.

No Code, No Worries!

If you prefer not to touch code, you can install and use a plugin to take care of your error pages for you.

Here are the best plugins available for customizing your error pages. They’re all updated regularly and work well.

  • 404page

    With this plugin, you can set any page you want to be your 404 error page. That means you can create a page as you normally would through your admin dashboard, then turn it into your error page with this plugin. No coding needed.

    It also lets search engines know not to index pages that return the 404 error to help protect your SEO ranking.

  • Custom Error Pages

    The Custom Error Pages plugin lets you create custom 404 and 403 error pages. It has been created to work with any theme and once you set it up initially with your custom error pages, you don’t have to touch it or worry about it again.

  • Forty Four

    With this plugin, you can create a lightweight 404 error page so it loads quickly when visitors land on it. Optionally, you can also set up redirects so visitors are automatically sent elsewhere to help protect your search engine ranking.

Wrapping Up

Now you know how to create a custom error page. It can take a bit of doing, but it’s worth it for your visitors since you can customize the page to offer more information about the error.

Rather than getting a page with a one-liner that doesn’t explain what happened, you can offer your visitors more guidance and point them in the right direction.

Have you considered customizing your error pages for your WordPress site? Do you already have custom error pages? What kind of error pages have you created or want to create for your site? Feel free to share your experience in the comments below.
Tags:
Jenni McKinnon
Jenni McKinnon A copywriter, copy editor, web developer and course instructor, Jenni has spent over 15 years developing websites and almost as long for WordPress. A self-described WordPress nerd, she enjoys watching The Simpsons and names her test sites after references from the show.