A Better Maintenance Page with Bypass for WordPress

After using many wordpress maintenance mode plugins I decided that they all had a problem in that they relied on the database to either redirect or display a maintenance page. If the site is going into maintenance mode so you can work on the database then this could present a problem.
The following maintenance mode code is easy to turn on and off via a URL and simple to implement, it also utilises a cookie bypass to allow you to continue working on the site whilst everyone else is presented with a simple maintenance page and reports a 503 Service Unavailable to search engines.

Once complete you will have the following maintenance mode options via a URL:

To enter into maintenance mode and set bypass cookie which allows access to the site whilst in maintenance:
domain.com/maintenance-switch.php?key=MY-SECRET-KEY&mode=enable

To exit from maintenance mode:
domain.com/maintenance-switch.php?key=MY-SECRET-KEY&mode=disable

To just set the bypass cookie which allows access to the site whilst in maintenance:
domain.com/maintenance-switch.php?key=MY-SECRET-KEY

Step 1: Create the maintenance page.

Copy the code below and edit it to your needs, at the very least you should change the domain.com and phone number elements.
Save the code as maintenance.php and upload it to your website root so that it can be accessed via domain.com/maintenance.php
The maintenance.php has a redirect so that after 30 second the visitor is redirected to the homepage unless it’s still in maintenance mode.

Tip:
You can also copy maintenance.php and rename it to db-error.php then upload to domain.com/wp-content, this will be automatically displayed instead of the not very helpful Error Establishing a Database Connection text in the event of this error occurring.

maintenance.php

<?php
/**
 * Version: 1.0
 * Date: 30/03/2018
 * Source: https://deanandrews.uk/simple-maintenance-page/
 */
header("HTTP/1.1 503 Service Temporarily Unavailable");
header("Status: 503 Service Temporarily Unavailable");
header("Retry-After: 3600");

header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
?>
<!DOCTYPE html>
<html>
<head>
	<title>503 Service Temporarily Unavailable</title>
	<meta http-equiv="refresh" content="30;URL='https://domain.com/'" /> 
	
<style type="text/css">

body {
	padding: 0;
	margin: 0;
	background: #719430;
	font-family: 'Source Sans Pro', sans-serif;
}
body a {
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
	text-decoration: none;
}
body a:hover {
	text-decoration: none;
}
body a:focus, a:hover {
	text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	text-align: center;
}
p {
	margin:0;
}

a:focus, a:hover {
	text-decoration: none;
	outline: none
}

.main{
	width:80%;
	margin:70px auto 0px auto;
	text-align:center;
}

.main h1{
	font-size:170px;
	font-weight:400;
	color:#fff;
}

.main h2, h3{
	margin:30px 0px;
	font-size:28px;
	font-weight:400;
	color:#fff;
}

.footer{
	text-align:center;
	margin-top:35px;
}
.footer p{
	font-size:16px;
	color:#fff;
}
.footer a{
	color:#fff;

	border:none;
	padding:0;
}
.footer a:hover{
	color:#000;
}

@media(max-width:996px){
	.main {
		width: 76%;
	}
	.main h1 {
		font-size: 95px;
	}
}

@media(max-width:600px){
	.main {
		width: 76%;
	}
	.main h1 {
		font-size: 80px;
	}
}

@media(max-width:480px){
	body {
		min-height: 464px;
	}
	.main {
		margin-top: 40px;
	}
	.main h2 {
		font-size: 45px;
	}
	.main h1 {
		font-size: 53px;
	}
	.main h3 {
		font-size: 17px;
	}
	.footer {
		margin-top: 35px;
	}
}
</style>
</head>
<body>
	<div class="main">
		<h1>YOUR-DOMAIN</h1>
		<h2>OUR WEBSITE IS TEMPORARILY UNAVAILABLE!</h2>
		<div class="footer">
			<h3>Our sales team however are on hand between 8am - 5pm to take calls and orders.</h3>
			<h3>Call 000 000 0000 or email <a href="mailto:sales@domain.com">sales@domain.com</a></h3>
			<p>This page will redirect when the website becomes available or you can check back later.</p>
		</div>
	</div>
</body>
</html>

Step 2. Edit the htaccess file.

Make a backup then edit domain.com/.htaccess file.
The following code block needs to be added to the very beginning of the file. You will need to change the text UNIQUE-COOKIE-NAME to something else of your choosing.

.htaccess

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_COOKIE} !maintenance-mode-bypass-UNIQUE-COOKIE-NAME
RewriteCond %{DOCUMENT_ROOT}/maintenance.php -f
RewriteCond %{DOCUMENT_ROOT}/maintenance.enabled -f
RewriteCond %{SCRIPT_FILENAME} !maintenance.php
RewriteCond %{SCRIPT_FILENAME} !maintenance-switch.php
RewriteRule ^.*$ /maintenance.php [R=503,L]
ErrorDocument 503 /maintenance.php
Header Set Cache-Control "max-age=0, no-store"
</IfModule>

Step 3. Add the maintenance-switch file.

Copy the code below and change MY-SECRET-KEY. This is the key that will be included in the URL to enable and disable maintenance mode, also edit the UNIQUE-COOKIE-NAME to match as per above.
Save the code as maintenance-switch.php and upload it to your website root so that it can be accessed via domain.com/maintenance-switch.php

maintenance-switch.php

<?php

// Get the key data from the URL
function CheckAccess(){
  return @$_GET['key']=='MY-SECRET-KEY';
} 

// If the key is incorrect block access to page
if (!CheckAccess()){
  header('HTTP/1.0 404 Not Found');
  exit;
}

// Set defaults
$cookie_name = "maintenance-mode-bypass-UNIQUE-COOKIE-NAME";
$cookie_value = "enabled";
$maint_file = "maintenance.enabled";

// Set the bypass cookie
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1 day


switch ($_GET['mode']) {
    case 'enable':
        $handle = fopen($maint_file, 'w') or die('Cannot open file:  '.$maint_file);
        echo "Maintenance mode enabled<br>";
        break;
    case 'disable':
        unlink($maint_file);
        echo "Maintenance mode disabled<br>";
        break;
    default:
        echo "Maintenance mode bypass enabled<br>";
        break;
}

?>

How it works

When you visit the URL domain.com/maintenance-switch.php?key=MY-SECRET-KEY&mode=enable to enable maintenance mode.
MY-SECRET-KEY is checked to ensure you have access to run the code.
The bypass cookie is set (maintenance-mode-bypass-UNIQUE-COOKIE-NAME).
A file named maintenance.enabled is created on the hosting root (this file is the indicator to the htaccess file)

Any visitors to your site will now see the maintenance page. This is handled by the htaccess file that checks for the existence of the maintenance.enabled file in the root, if found and the cookie is not set then redirect to maintenance.php.

When you visit the URL domain.com/maintenance-switch.php?key=MY-SECRET-KEY&mode=disable to disable maintenance mode.
The previously created file named maintenance.enabled is deleted

Any visitors to your site will now see the site as normal. So basically if the file maintenance.enabled is the switch for enabling and disabling the maintenance mode and the cookie just allows you to bypass the rules set in the htaccess.

domain.com/maintenance-switch.php?key=MY-SECRET-KEY can be used to set the cookie for other developers to work on the site.

0 replies

Want to join the discussion?
Feel free to contribute!

A Better Maintenance Page with Bypass for WordPress

Leave a Reply

Leave a Reply Cancel reply

A Better Maintenance Page with Bypass for WordPress

Share this entry

Leave a Reply

Leave a Reply Cancel reply