Mitch Musarra
Mitch Musarra

Mitch Musarra is a tech entrepreneur based in Sydney with experience in finance, education, healthcare and SaaS. This is a blog dedicated to sharing personalised methodologies for cloud-related topics.

January 2020
M T W T F S S
« Mar    
 12345
6789101112
13141516171819
20212223242526
2728293031  

Categories


How to Create a Custom WordPress Database Error Page

StaffStaff

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:

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:

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

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

Staff
Author

Comments 0
There are currently no comments.