Select Page

If you’ve been using WordPress for awhile, then you probably know how to change things like your default pages or your 404 error page, but what about those not-so-customized pages that WordPress defaults to? I’m talking about the “maintenance mode” page and “error establishing a connection” error that rears their ugly heads every once in awhile.

Want to take your site from weak to 3l3373? Here’s how – and the good news is, your clients will think you are a golden god for adding this slick “custom” feature to their site. The best part? It doesn’t take a lot of time to do.

In your theme folder, you’re going to create two new files:

Update: in the latest version of WordPress, these files will go in the root of your /wp-content/ folder.

maintenance.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jeromi.us | Maintenance Mode Activated</title>
</head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Bitter:400,700' rel='stylesheet' type='text/css'>
<style>
body{
background:#000000;
color:#FFFFFF;
font-family: 'Bitter', serif;
}

.info_container{
width:600px;
margin:0 auto;
margin-top:20%;
text-align:center;
}

.icon{
color:#FFFFFF;
width:40px;
height:40px;
font-family:"FontAwesome";
font-size:120px;
position:fixed;
top:50px;
left:70px;
/* Safari */
-webkit-transform: rotate(35deg);
/* Firefox */
-moz-transform: rotate(35deg);
/* IE */
-ms-transform: rotate(35deg);
/* Opera */
-o-transform: rotate(35deg);
}

h1{
font-size:60px;
}

p{
font-size:24px;
}
</style>
<body>
<div class="icon">&#xf085;</div>
<div class="info_container">
<h1>Maintenance Mode Activated</h1>

<p>The site is currently offline for scheduled maitnenance and will be back online momentarily.</p>
</div>

</body>
</html>

 

The second file you’re going to create is db-error.php

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jeromi.us | Maintenance Mode Activated</title>
</head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Bitter:400,700' rel='stylesheet' type='text/css'>
<style>
body{
background:#000000;
color:#FFFFFF;
font-family: 'Bitter', serif;
}

.info_container{
width:600px;
margin:0 auto;
margin-top:20%;
text-align:center;
}

.icon{
color:#FFFFFF;
width:40px;
height:40px;
font-family:"FontAwesome";
font-size:120px;
position:fixed;
top:50px;
left:70px;
/* Safari */
-webkit-transform: rotate(35deg);
/* Firefox */
-moz-transform: rotate(35deg);
/* IE */
-ms-transform: rotate(35deg);
/* Opera */
-o-transform: rotate(35deg);
}

h1{
font-size:60px;
}

p{
font-size:24px;
}
</style>
<body>
<div class="icon">&#xf188;</div>

<div class="info_container">
<h1>Database Connection Error</h1>

<p>Oh snap! Something went wrong. Our monkeys are working on a solution.</p>
</div>

</body>
</html>

 

Quick, easy, and you will prove your worth among the WordPress elite!