Blog

In WordPress, how can I add a custom database error page?

On your WordPress site, have you ever seen the ‘Error establishing a database connection error page?

This message may appear for a variety of reasons, but it is ugly and may cause confusion among your visitors. Also, until you visit your website and see the notification, you will not realize it is down.

We’ll show you how to personalize your database error page in WordPress in this article. We’ll also teach you how to set up an alert for when your website goes down due to a database error.

Contents

What Are the Causes of a Database Connection Error?

One of the most common WordPress issues is ‘Error establishing a database connection.’ It’s caused by inaccurate database information in your WordPress settings, a faulty database, or a database server that isn’t responding.

For newcomers, solving this error might be difficult, therefore we’ve included a list of options in our article on how to fix the ‘Error establishing a database connection in WordPress.

The last thing your visitors want to see is a generic WordPress error message. The error page is incomplete, ugly, and lacks any of your brandings. It appears that your website has vanished entirely.

With that in mind, let’s take a look at how you can make your WordPress website’s error page more useful by customizing it.

Using WordPress to Create a Custom Database Error Page

To get started, open a new file in a text editor like Notepad and paste the following content inside.

<?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
  
  // If you wish to email yourself upon an error
  // mail("your@email.com", "Database Error", "There is a problem with the database!", "From: Db Error Watching");
  
?>
  
<!DOCTYPE HTML>
<html>
<head>
<title>Database Error</title>
<style>
body { padding: 20px; background: red; color: white; font-size: 60px; }
</style>
</head>
<body>
  You got problems.
</body>
</html>

Source: CSS Tricks

After that, rename the file to ‘db-error.php’. Then, using an FTP application, upload the file to the /wp-content/ directory of your WordPress site. For additional information, see our FTP with WordPress beginner’s guide.

When your website is unable to create a database connection, the error message shown below will appear, and the title “Database Error” will appear in the web browser’s tab.

It’s not the most appealing error message, but it’s a start in the right direction. You can now alter the HTML and CSS of the page to better suit your own website.

Customizing the WordPress Database Error Page

Now it’s time to make your database error page appear amazing and fit in with the rest of your website’s layout. Your brand’s logo and tagline should also be included on the page.

You might also inject some levity into your statement. Even if your guests are unable to browse your website, you can keep them entertained.

Our collection of the top WordPress 404 error page design examples can help you get started. This Empty Cup 404 page, for example, might be easily adapted to act as a database error page.

‘Error 404’ should be replaced with ‘Database Error,’ and ‘This page cannot be found should be replaced with ‘This website is temporarily unavailable.’ You should also remove the ‘Go Home’ option, as your entire website is most likely offline.

The SeedProd plugin is the simplest method to build a custom database error page design. It’s the most popular landing page builder, featuring drag-and-drop flexibility for customizing error pages without having to touch any code.

SeedProd has a free version, but to use the built-in 404 error page templates, you’ll need to upgrade to the Pro version.

Check out our tutorial on how to improve your WordPress 404-page template for ideas on how to use SeedProd to build bespoke error pages.

The Database Error is being notified through email.

If your website goes down, you’ll want to be warned so you can take action.

When your website has a database error, the code snippet we used before will send you an email notification. Because it is commented out by two slashes, that section of the code is currently inactive.

// If you wish to email yourself upon an error
// mail("your@email.com", "Database Error", "There is a problem with the database!", "From: Db Error Watching");

You must delete the two slashes before the mail function in order to receive notifications.

// If you wish to email yourself upon an error
mail("your@email.com", "Database Error", "There is a problem with the database!", "From: Db Error Watching");

You’ll also need to substitute your own email address for ‘your@email.com.’ Remember to save and upload the updated db-error.php file to your WordPress site’s /wp-content/ directory.

We hope this tutorial on how to build a custom database error page for WordPress was helpful.

Leave a Reply