If you’ve ever experienced a database outage or come across a site that’s been down, you’re all too familiar with seeing the standard WordPress error messages.
Not only are these unsightly but they don’t match your site or messaging. The good news is it’s easy to create a custom WordPress database error page.
Step 1 – Create a new file called db-error.php
Create a new empty file in any text editor and save it as db-error.php. Remember where you saved it because you’ll need to upload it to your server in step 3 below.
Step 2 – Paste in the following code
Below is the code we use on the AppThemes website. Select it all and then paste it in your db-error.php file. Before you save it, you’ll want to change the html title and body messaging to match your site. The css can also be changed to match your color scheme.
We opted to keep things simple and not include any logos or images. It’s a page that hopefully nobody will ever need to see.
<?php header('HTTP/1.1 503 Service Temporarily Unavailable'); header('Status: 503 Service Temporarily Unavailable'); ?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" dir='ltr'> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>AppThemes Unavailable</title> <style type="text/css"> html{background:#f9f9f9} body{background:#fff; color:#333; font-family:sans-serif; margin:2em auto; padding:1em 2em 2em; -webkit-border-radius:3px; border-radius:3px; border:1px solid #dfdfdf; max-width:750px; text-align:center;} #error-page{margin-top:50px} #error-page p{font-size:14px; line-height:1.5; margin:25px 0 20px} #error-page code{font-family:Consolas,Monaco,monospace} a{color:#21759B; text-decoration:none} a:hover{color:#D54E21} </style> </head> <body id="error-page"> <h1>Captain, the ship can’t take much more of this!</h1> <p>AppThemes is currently experiencing some database difficulties. Please check back again later.</p> </body> </html> |
Step 3 – Upload the file to your server
Using sftp or ssh, upload your db-error.php file to your web server. It goes inside your wp-content/ directory. On most shared hosts, you’ll find it in /public_html/wp-content/.
Step 4 – Testing the new error page
The easiest way without actually bringing down your database is to enter the full url to the db-error.php file. For example, http://www.yoursite.com/wp-content/db-error.php. If you don’t see the page, you likely uploaded the file in the wrong location.
Here’s what the AppThemes.com database error page looks like.
If you’re tech savvy and really want to simulate a down database, you could stop mysql and then try loading up your website’s home page. Do it during off peak hours or very quickly so you don’t interrupt your website visitors.
That’s it! Now you’ve got a custom WordPress database error page. Hopefully nobody will ever have to see it! 🙂
Like this tutorial? Subscribe and get the latest tutorials delivered straight to your inbox or feed reader.
