Skip to content

Instantly share code, notes, and snippets.

@bjornjohansen
Created August 31, 2017 11:57
Show Gist options
  • Save bjornjohansen/40b332b74184161ddd7e9d745c7e277b to your computer and use it in GitHub Desktop.
Save bjornjohansen/40b332b74184161ddd7e9d745c7e277b to your computer and use it in GitHub Desktop.
Custom WordPress maintenance mode page
<?php
wp_load_translations_early();
$protocol = wp_get_server_protocol();
header( "$protocol 503 Service Unavailable", true, 503 );
header( 'Content-Type: text/html; charset=utf-8' );
header( 'Retry-After: 30' );
?>
<!DOCTYPE html>
<html>
<head>
<title><?php _e( 'Maintenance' ); ?></title>
<style>
html, body {
margin: 0;
padding: 0;
}
body {
border-top: 10px solid #1e73be;
color: #1e73be;
font-family: Helvetica, sans-serif;
text-align: center;
}
.spinner {
width: 60px;
height: 60px;
background-color: #1e73be;
margin: 100px auto;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes sk-rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
@keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
</style>
</head>
<body>
<h1><?php _e( 'Maintenance' ); ?></h1>
<p><?php _e( 'Briefly unavailable for scheduled maintenance. Check back in a minute.' ); ?></p>
<div class="spinner"></div>
<script>
var maintenance_check = function() {
var request = new XMLHttpRequest();
request.open( 'HEAD', window.location, true );
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
// Maintenance mode ended. Reload page.
window.location.reload();
} else {
// Still in maintenance mode. Try again in 3 seconds.
setTimeout( maintenance_check, 3000 );
}
};
request.onerror = function() {
// There was some connection error. Try again in 3 seconds.
setTimeout( maintenance_check, 3000 );
};
request.send();
};
maintenance_check();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment