One quick and easy way to increase the experience for your clients is to add a custom maintenance page design to WordPress. This page will automatically display when WordPress or WordPress plugins are upgrading. It will replace the out of the box solution that displays a basic Times Roman “Briefly Unavailable for Scheduled Maintenance” message.
Create a new file in your WordPress installation: /wp-content/maintenance.php
. This file will always be kept independent of core upgrades.
<!--?php /* Tell search engines that the site is temporarily unavilable */ $protocol = $_SERVER["SERVER_PROTOCOL"]; if ( 'HTTP/1.1' != $protocol && 'HTTP/1.0' != $protocol ) $protocol = 'HTTP/1.0'; header( "$protocol 503 Service Unavailable", true, 503 ); header( 'Content-Type: text/html; charset=utf-8' ); header( 'Retry-After: 600' ); ?-->
<style type="text/css">
@import url(../wp-admin/css/login.css);
@import url(../wp-admin/css/colors-fresh.css);
html body,
html {
background:#fbf0e1;
}
#content-outer {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
}
.motivation-maker {
width:256px;
height:256px;
display:block;
position:relative;
left:450px;
top:-50px;
z-index:5;
}
#content {
color:#605850;
font:14px/1.6em "Lucida Grand", "Lucida Sans", "Lucida Sans Unicode", Arial;
width:420px;
height:auto;
margin-left:-322px;
position:absolute;
left:50%;
top:-150px;
-moz-border-radius:11px;
-khtml-border-radius:11px;
-webkit-border-radius:11px;
border-radius:5px;
background:#fff;
padding:25px 200px 10px 25px;
}
#content h1 {
line-height:1.2em;
margin-top:-257px;
color:#2E1F0F;
}
#content p {
margin:0 0 1.2em;
}
h1,h2,h3 {
font-family:Calibri, "Franklin Gothic", Arial;
color:#111;
}
h1 { margin: 0 0 .6em; }
h2 { margin: 1.07em 0 .535em; }
h3 { margin: 1.14em 0 .57em; }
h4 { margin: 1.23em 0 .615em; }
h5 { margin: 1.33em 0 .67em; }
h6 { margin: 1.6em 0 .8em; }
strong {
color:#D47F31;
}
a:link,
a:visited {
color:#D54E21;
text-decoration:none;
}
a:hover,
a:active {
color:#56A5EC;
}
</style>
~~~.language-markupWe're on a quick coffee break.
Our site is undergoing a brief bit of maintenance that will last 5 minutes at the very most. We apologize for the inconvenience, we're doing out best to get things back to working order for you.~~~.language-markup
Keep in mind that you won’t be able to use WordPress functions in this file, think of it as a standalone HTML file that is external from WordPress.
Check out a demo