Tinkering with the .maintenance file

WordPress has a built-in method for throwing up a maintenance page, which makes a website completely inaccessible. This is used during its own internal updates. You probably recognize the screen: it’s a simple white screen which says “Briefly unavailable for scheduled maintenance. Check back in a minute.”

Screen Shot 2017-04-03 at 5.35.59 AM.png

You can manually trigger this maintenance mode by creating a .maintenance file in the root of your WordPress install. There is an excellent series of posts explaining how that works and how to customize it using a /wp-content/maintenance.php file here: sivel.net/2009/06/wordpress-maintenance-mode-without-a-plugin/.

Reengineering for site migrations

The indented use for the .maintenance file are small maintenances fixes that take less then 10 minutes. However, as mentioned in Sivel’s post it can be extended using some PHP trickery $upgrading = time();. Rather than using a custom template, I modified it to be a single use file which can display a customize message for an permanent amount of time.

Screen Shot 2017-04-03 at 5.31.20 AM.png

Sometimes it’s best to make everything inaccessible

You might be thinking, why not just use a maintenance plugin? Maintenances plugins are great when you want to hide the front end of the website. A plugin solution will still allow the WordPress backend to process requests, which isn’t great if you want to move very dynamic websites, especially ones involving recurring payments. This method will completely block any front end, backend or even WP-CLI request from triggering WordPress. Here is the code for one I recently used. Feel free to use and modify.

<?php 

 // Prevents WordPress from ending maintenance mode
 $upgrading = time(); 

?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Maintenance</title>
 <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
 <style>
 body {
 margin-top: 2%;
 padding: 2%;
 font-family: 'Lato', sans-serif;
 text-align: center;
 color: rgba(0, 0, 0, 0.9);
 }
 h1 { 
 font-size:2em;
 }
 h2 { 
 font-size:1.5em;
 font-weight: normal;
 }
 i {
 margin: 0 0 0 10px;
 }
 @-webkit-keyframes rotating /* Safari and Chrome */ {
 from {
 -ms-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
 }
 to {
 -ms-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -webkit-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 transform: rotate(360deg);
 }
 }
 @keyframes rotating {
 from {
 -ms-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
 }
 to {
 -ms-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -webkit-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 transform: rotate(360deg);
 }
 }
 i.fa-refresh {
 -webkit-animation: rotating 3s linear infinite;
 -moz-animation: rotating 3s linear infinite;
 -ms-animation: rotating 3s linear infinite;
 -o-animation: rotating 3s linear infinite;
 animation: rotating 3s linear infinite;
 }
 a {
 color: rgba(0, 0, 0, 0.9);
 text-decoration: none;
 border-bottom: 1px solid #993333;
 }
 img {
 margin-bottom: 2%;
 }
 </style>
</head>
<body>

 <img src="https://anchor.host/wp-content/themes/swell-anchorhost/img/logo.svg" width="300">

 <h1>Briefly unavailable for<br /> scheduled maintenance.</h1>

 <h2>Check back in approximately 15 minutes.</h2>

 <p><small><i class="fa fa-calendar" aria-hidden="true"></i> Sun Apr 2nd 2017 <i class="fa fa-clock-o" aria-hidden="true"></i> <a href="http://www.wolframalpha.com/input/?i=9pm+EST" target="_blank">9pm EST</a></small></p>
 <h2><i class="fa fa-refresh" aria-hidden="true"></i></h2>

</body>
</html>
<?php 

 // Prevents WordPress from loading default message
 die(); 

?>