How to Create a Custom WordPress Database Error Page

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>
`;