How to Create Your Own Custom Maintenance Screen for WordPress

The maintenance page is displayed to anyone not logged in.

Let’s have a brief overview of what we’ll be creating.

• It’s a custom plugin.
• Activating the plugin triggers the “maintenance mode”.
• Anyone who is not an administrator and is not looking at the login page will see the maintenance page.
• The maintenance page can be any HTML and CSS you want!

 

One of the reasons that this plugin was useful for me was because many of the ones already in WordPress.org show the maintenance mode only to people not logged in. But on my website every single customer has an account, which means they might be logged in and would thus bypass the maintenance page!

But the custom plugin we’ll be building today shows everyone the maintenance mode unless they’re an administrator. So you specifically have to be an admin in order to bypass it.

First let’s look at the folder structure.

Before we dig into the actual coding, let’s look at the folder structure of the plugin. This will help you have an understanding of which files are doing what.

• maintenance-mode/ — Main plugin folder containing all files.
  • assets/ — Folder containing all assets, like CSS files and images.
    • css/ — Folder containing CSS files.
      • maintenance.css — The CSS file we load in our template.
    • images/ — Folder containing images you need in your layout.
  • views/ — Folder containing all public-facing HTML layouts.
    • maintenance.php — The HTML that makes up our public-facing maintenance page.
  • maintenance-mode.php — Our main plugin file that gets things started.

Hopefully that makes sense.

• Every single file is in a folder called maintenance-mode.
• The maintenance-mode.php file is what tells WordPress, “Hey, this is a plugin! Let’s show maintenance mode to certain people.”
• Any images or CSS files or JavaScript files live in the assets folder.
• The HTML for our actual maintenance mode template goes inside the views folder, in a file called maintenance.php.

With me so far?

Create the plugin folder and main file.

First create your plugin folder. The name of the folder should be the slug of your plugin. maintenance-mode is a good choice.

Then, inside that folder, create a PHP file with the same name, but with the .php extension. So mine is called maintenance-mode.php

The code for this file is very simple:

<?php
/*
 * Plugin Name: Maintenance Mode
 * Plugin URI: https://www.nosegraze.com
 * Description: Displays a coming soon page for anyone who's not logged in.
 * Version: 1.0
 * Author: Nose Graze
 * Author URI: https://www.nosegraze.com
 * License: GPL2
 *
 * @package maintenance-mode
 * @copyright Copyright (c) 2015, Ashley Evans
 * @license GPL2+
*/

/**
 * Maintenance Page
 *
 * Displays the coming soon page for anyone who's not logged in.
 * The login page gets excluded so that you can login if necessary.
 *
 * @return void
 */
function ng_maintenance_mode() {
	global $pagenow;
	if ( $pagenow !== 'wp-login.php' && ! current_user_can( 'manage_options' ) && ! is_admin() ) {
		header( $_SERVER["SERVER_PROTOCOL"] . ' 503 Service Temporarily Unavailable', true, 503 );
		header( 'Content-Type: text/html; charset=utf-8' );
		if ( file_exists( plugin_dir_path( __FILE__ ) . 'views/maintenance.php' ) ) {
			require_once( plugin_dir_path( __FILE__ ) . 'views/maintenance.php' );
		}
		die();
	}
}

add_action( 'wp_loaded', 'ng_maintenance_mode' );

The huge comment block as the top is what tells WordPress this is a plugin. You can edit those values to change the plugin name, URI, description, etc.

Next we have one single function that gets loaded after WordPress is loaded. This is what displays the maintenance page. This is the exact line that determines who sees the maintenance page:

if ( $pagenow !== 'wp-login.php' && ! current_user_can( 'manage_options' ) && ! is_admin() ) {

All of the following conditions must be met in order for the maintenance page to be displayed:

• The current page must not be the login page (people need to be able to login!).
• The current user must not have the “manage_options” capability (this is typically only given to administrators, so in other words, the user must not be an admin).
• We must not be in the admin area. The maintenance page only affects the public portions of the site.

If all of those conditions are met, then we display the maintenance page (providing the file exists  ).

Build your maintenance mode template.

Next we’re actually going to create our template. This is what gets shown on the public side of your site.

1. Inside the plugin folder, create another folder called views.
2. Inside the views folder, create a new file called maintenance.php

You can put whatever HTML you want inside the maintenance.php file. Here’s what mine looks like:

<?php
/**
 * Maintenance mode template that's shown to logged out users.
 *
 * @package   maintenance-mode
 * @copyright Copyright (c) 2015, Ashley Evans
 * @license   GPL2+
 */
?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="http://gmpg.org/xfn/11">

	<link href='//fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="<?php echo plugins_url( 'assets/css/maintenance.css', dirname( __FILE__ ) ); ?>">

	<title>Down for Maintenance | Nose Graze</title>
</head>

<body>

<header>
	<h1><a href="<?php echo home_url( '/' ); ?>">NoseGraze</a></h1>

	<h2>Make <strong>WordPress</strong> your bitch.</h2>
</header>

<main>
	<p>I'm making some <strong>awesome</strong> changes to the site. I'll be back shortly! Thanks for your patience. :)</p>
</main>

</body>
</html>

• The comment block at the top describes what the page is.
• In the <head> section I include some external stylesheets. I also include our assets/css/maintenance.css file (to be created).
• In the <body> I include all the text I want on the page.

You can literally include whatever you want in this template. The only important thing is this line in the head:

<link rel="stylesheet" href="<?php echo plugins_url( 'assets/css/maintenance.css', dirname( __FILE__ ) ); ?>">

As I explained, this brings in our external stylesheet, which we’ll be creating next!

Create your stylesheet.

1. Go back into the main plugin folder.
2. Inside that, create a new folder called assets
3. Inside “assets”, create a new folder called css
4. If you’ll be including images in your page, then also create a folder called images in your “assets” folder.
5. Go inside the “css” folder and create a new file called maintenance.css

The maintenance.css file is where you put all your CSS code. I’m not going to paste all of mine here since yours will obviously be different, but here’s a snippet to give you an idea:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  min-height: 100%;
}

body {
  background: url("../images/arthur-bg.jpg") no-repeat center top;
  background-size: cover;
  color: white;
  font-family: "proxima-nova", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  padding: 2em 15px;
}

You can see where I’ve referenced one of my images:

background: url("../images/arthur-bg.jpg") no-repeat center top;

That’s the path you’d need to use ( ../images/your-image.jpg ).

All done!

Now literally all you have to do is add your plugin to WordPress.

1. Turn your whole plugin folder into a zip file.
2. Login to WordPress and go to Plugins » Add New » Upload.
3. Upload your zip file.
4. Activate the plugin to enable maintenance mode.

When you’re done doing maintenance, simply deactivate the plugin.

Download the ready-made plugin

I’ve put all the above code together for you in a plugin file that’s ready to activate. You can either use the template I created for you (see below) or you can modify the files to build your own and just use custom_wp_maintenance_page this plugin as a starting point..

Credit by Ashley.