Uncategorized

How to Create a Custom WordPress Database Error Page

By March 18, 2019 August 25th, 2019 No Comments

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. 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:

WordPress Database Error Page
Your Current WordPress Database Error Page

For customers visiting your website during your database outage, this is catastrophic to your brand. Instead, we want something that looks like this:

Custom WordPress Database Error Page
Your New WordPress Database Error Page

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