How to enable the WordPress maintenance mode

WordPress has a built-in maintenance feature. By adding a “.maintenance” file to your website’s root directory with the piece of code WordPress will trigger its maintenance mode.

<?php $upgrading = time(); ?>

This file is also used during the auto-update process. By using the maintenance mode, users will not see any error messages while you’re updating your WordPress installation or theme. It will generate a default maintenance message but you can override this by adding a maintenance.php file to your wp-content folder. 

This is a standard maintenance page I use:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Maintenance</title>
    <style>
        ::-moz-selection {
            background: #b3d4fc;
            text-shadow: none;
        }

        ::selection {
            background: #b3d4fc;
            text-shadow: none;
        }

        html {
            padding: 30px 10px;
            font-size: 20px;
            line-height: 1.4;
            color: #737373;
            background: #f0f0f0;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }

        a{
            color: #555555;
        }

        html,
        input {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        body {
            max-width: 500px;
            _width: 500px;
            padding: 30px 20px 50px;
            border: 1px solid #b3b3b3;
            border-radius: 4px;
            margin: 0 auto;
            box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff;
            background: #fcfcfc;
        }

        h1 ,h2, h2 a{
            margin: 0 10px;
            font-size: 30px;
            text-align: center;
            text-decoration: none;
        }

        h1 {
            margin: 0 10px;
            font-size: 30px;
            text-align: center;
            color: #999999;
        }

        h3 {
            margin: 1.5em 0 0.5em;
        }

        p {
            margin: 1em 0;
            text-align: center;
        }

        ul {
            padding: 0 0 0 40px;
            margin: 1em 0;
        }

        .container {
            max-width: 380px;
            _width: 380px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>We are currently updating the website. We will be back shortly.</h1>
    </div>
</body>
</html>

 The page will look like like this:

Maintenance mode in WordPress

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s