Blog

How to Create a Custom WordPress Database Error Page

Sometimes in life (and web development), errors happen unexpectedly. In the case of hosting a WordPress site, sometimes the connection to the underlying MySQL database fails.

Mitchell Musarra - IT Solutions Architect at MJWebs

Mitchell Musarra

Mar 18, 2019

To save your brand from lost conversions, you need a custom error page to explain the situation and buy you time to fix the underlying issue.

WordPress database errors can occur for any number of reasons, such as:

  • Database server is full
  • Server memory is exhausted
  • Host networking issues

As a developer, planning for outages is quintessential. Taking the time to implement custom WordPress database error page will retain your professional image while your website is offline and potentially save conversions by asking them to try again later. Most importantly, you can relax and have the time to make a coffee prior to investigating the actual problem.

Right now, your error page looks like this: Database connection error page screenshot

For customers visiting your website during your database outage, this is catastrophic to your brand. Instead, we want something that looks like this: MJWebs error page for unscheduled downtime

To use the custom error page above, we are going to need to create a new file called wp-error.php in your wp-content directory. We will NOT use a plugin for this as a database outage will impair the plugin from being run correctly.

Edit the following code to your taste and place in your-site/wp-content/db-error.php.

// File: wp-content/db-error.php
// MJWebs

<?php
header('HTTP/1.1 503 Service Temporarily Unavailable');
header('Status: 503 Service Temporarily Unavailable');
header('Retry-After: 3600'); // 1 hour = 3600 seconds
?>
<!doctype html>

<html lang="en">

<head>
<meta charset="utf-8">

<title>503 - MJWebs</title>
<meta name="author" content="MJWEBS PTY LTD">

<style>

h1 {
font-size: 28px;
font-weight: 700;
}
h2 {
font-weight: 300;
font-size: 20px;
}
h5 {
font-weight: 300;
font-size: 12px;
}
p {
font-weight: 300;
font-size: 14px;

}
body {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.center {
text-align: center;
padding-top: 60px;
padding-left: 10;
padding-right: 10px;
}

</style>
</head>

<body>

<div class="center">
<img data-shadow="none" data-shadow-direction="middle" class="img-with-animation skip-lazy  animated-in" data-delay="0" height="97" width="110" src="https://s3-ap-southeast-2.amazonaws.com/mjwebs-branding/0.5x/mjwebs-dark%400.5x.png" alt=""
style="opacity: 1;">
<h1>Sorry, We're Having Some Problems Right Now!</h1>
<h2>MJWebs is experiencing some unscheduled downtime. Please check back later!</h2>
<p>If you need immediate help, contact [email protected]</p>

<object width="300px" height="300px" data="https://s3-ap-southeast-2.amazonaws.com/mjwebs-branding/icons/mjwebs-starman.svg" type="image/svg+xml">
</object>
<h5>MJWEBS_ERROR_503_TEMPORARY</h5>
</div>

</body>

</html>
`;

Ready to solve problems?

Get in touch with us today.

Subscribe to our newsletter

The latest news, articles, and resources, sent to your inbox monthly.

© 2020 MJWebs Pty Limited. All rights reserved.