Custom WordPress database error page with email notifications

If you have been using WordPress for a while, there is a good chance that you have seen the “Error Establishing a Database Connection” page once or twice. Now while WordPress is a great platform for website owners and developers, a stark white page with bold black text does not send a great message to anyone visiting your website, especially since database connection issues are the most common WordPress errors and the causes can vary from high traffic and server load or faults, through to website miss-configuration or a bad plugin or update.

Since the chance that you or a visitor to your website will at some stage encounter such an error, why not style the page to make it less confronting while also echoing your sites theming? And if you are a developer, why not expand your services to include the creation of a custom DB Error page while you’re building a clients website?

Statistically, it will be a visitor to your site that will stumble upon the error page if there is an issue, and chances are that the visitor will navigate away from your website and you will be none the wiser as to why. Now by adding some php to the custom error page, we can have it send the website administrator an email as soon as the page is loaded in a web browser.

To create your own database error page, you can simply copy the code below into a new file and modify the relevant fields to suit your needs. Once you have altered the custom fields, save the file as “db-error.php” and upload it to the “wp-includes” folder in your hosting accounts www/public html directory. WordPress will check the folder and automatically use your custom file the next time there is a database error.

 

The PHP, HTML, and CSS that makes it all work.

<?php // custom WordPress database error page

  header('HTTP/1.1 503 Service Temporarily Unavailable');
  header('Status: 503 Service Temporarily Unavailable');
  header('Retry-After: 600'); // 1 hour = 3600 seconds

  // Email on page load. Comment out or delete line below to remove this function.
   mail("your@email.com", "Email subject", "Message body", "From: Your WP website - Database Watcher");

?>

<html>
<head>
  <meta name="viewport" content="width=device-width;initial-scale=1.0; maximum-scale=1.0;">
  <meta http-equiv="content-type" content="text/html;">
  <title>Website Name - Error Message</title>
<style type="text/css">
  @import url(../wp-admin/css/login.css);
  @import url(../wp-admin/css/colors-fresh.css);
  .left {
    float: left;
    width: 25%;
    padding-left: 0%;
    padding-right: 0%;
    padding-bottom: 10px;
  }
  .right {
    float: right;
    width: 71%;
    padding-top: 20px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    background-color: #444;
    border-radius: 8px;
    min-height: 120px;
  }
  .group:after {
    content:"";
    display: table;
    clear: both;
  }

  img {
    max-width: 90%;
    height: auto;
    padding: 5%;
  }	
    @media screen and (max-width: 680px) {
    .left, 
    .right {
      float: none;
      width: auto;
    }
</style>
</head>
<body style="background-color: #888; font-color: #444;">	
  <div style="width: 100%; min-width: 380px; max-width: 680px; background-color: #888; margin-left: auto; margin-right: auto; padding-top: 5%;">	
    <div style="max-width: 100%; border-radius: 8px; background-color: #FFF; color: #444; padding: 10px 15px 0px 15px; font-family:helvetica; font-size: 18px; font-weight: normal;">
      <div class="group" style="margin-bottom: 10px; margin-top: 8px;">
        <div class="left"> <img moz-do-not-send="true" src="http://image.png" alt="Your Logo" height="250" width="250"></div>
        <div class="right">
          <div style="width: 92%; background-color: #444; margin-left: auto; margin-right: auto;">
              <div style="text-align: left; font-size: 26px; padding-bottom: 12px; color: #01B1FF;">Website Temporarily Unavailable</div>
            <div style="color: #888; font-size: 16px; padding-bottom: 8px;">Our website is currently unavailable due to high traffic or an internal error.</div>
            <div style="color: #888; font-size: 16px;">Please check back in a few minutes.</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

 

And finally, the completed custom database error page can be viewed below. To test if your custom error page is working and sending notifications on page load, just go to http://yourdomain/wp-includes/db-error.php

Tweak Geek IT custom database error page (Current as of the 30/01/2015)

Posted in Tutorial, Webmaster Services, Website Design, WordPress and tagged , , , , .

Les Vaulter

Tweak Geek IT | Customer Support