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.

Check out a demo

Customize Your Maintenance Page

Create a new file in your WordPress installation: /wp-content/maintenance.php. This file will always be kept independent of core upgrades.

Example XHTML/CSS/PHP

<!--?php /* Tell search engines that the site is temporarily unavilable */ $protocol = $_SERVER["SERVER_PROTOCOL"]; if ( 'HTTP/1.1' != $protocol &amp;&amp; '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>

 

We'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



~~~.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