After completely styling your website and making it completely polished it would be a shame to leave the default error page in place. Which one am I talking about? Its not a 404 page, that one can easily by styled from within your theme, I'm talking about this error page;

Yeah that one, the one that EVERY WordPress site has, and very little have modified that to fit their own website style. Granted, its not as easy to style this page as the 404, but it may still very well be worth the effort for the full experience on your site.

I don't believe this page does has any particular name, I tend to call it the "WP Die page" because this is shown when the wp_die( 'The error page' ); function is called. 

When the WP Die Page Shows

The most common place your visitors will encounter this is related to comments. Either because of the example shown above where a duplicate comment is detected, or for the "You are posting comments too quickly, Slow down." error.

Some other usages are:

  • "This email could not be sent"
  • "Sorry, comments are closed for this item."
  • "ERROR: please fill the required fields (name, email)."
  • "ERROR: please enter a valid email address."
  • "ERROR: please type a comment."
  • "ERROR: The comment could not be saved. Please try again later."

Those aren't the only times it shows, but it are the only cases in WordPress Core where that a visitor should be able to encounter them. There are a few other cases, but those are related to errors configuring your site, which shouldn't really happen after the initial configuration of your site.

There are also plenty of use cases that this error page could occur in the admin-area. I'm focussing on the user experience so I will exclude changing the page for admin related errors.

Customizing the Error Page

To customize the error page exactly to your requirements you will need basic HTML/CSS development skills, or have your web-developer assist you with this.

The first step is to implement this code snippet on your site;

This will enable a custom handler for when wp_die() is called. This code snippet will call a custom template file wp-die.php that you need to create in your active theme's directory.
If wanted you can also change this location so its theme independent, for example by moving it to the WP_CONTENT_DIR . '/wp-die.php path.

Error Page Template

This is the content of my wp-die.php file. This is based on a template I found on a CodePen from Redfrost (more inspiration for error pages).

In this template file you'd want to modify the template further to your own requirements. Other then the top parts regarding headers (and the 'no_robots') everything is open for you to change. 

I think that looks a whole lot better then the standard error page template! It may not be the perfect error page for this type of error (too less emphasize on the error IMO), but it works very well to show how you can customize the template to your own needs.

About the author: Jeroen Sormani is actively building WordPress, WooCommerce and Easy Digital Downloads plugins. Slightly obsessed by writing high quality code.
Follow Jeroen on Twitter

Leave a Reply

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