How to Create a Custom Maintenance Mode Page for your WordPress Site

Before starting work on a recent client project, I had to put the site into maintenance mode. I like to call it, ‘the-out-of-work’ mode. Maintenance mode sounds urbane so I’m forced I prefer to use it.

Usually, I’m pretty okay with plugins handling this for me. However, this time around, I had to create my own custom maintenance mode page, and style it differently. This was because the client had provided a PSD, for the maintenance mode page. Okay. Will do. I had to try out something new.

And, just like every time I have to try out something new, I turned to Google, to search for an option. Here’s what I wanted:

1. A custom maintenance mode page, and
2. Custom styling for the maintenance mode page

[space]

Using the WP Maintenance Mode Plugin

After searching, getting distracted, and searching some more, I found this plugin: WP Maintenance Mode. I wasn’t exactly searching for a plugin. But the reason why I settled on WP Maintenance Mode, was because it provided me a way to add my own HTML content, for the maintenance mode landing page.

It also took care of several nitty-gritties related to putting the site in maintenance mode.

Now, the plugin provided me an option to add HTML content, right from the dashboard. But, there wasn’t a direct option to add custom styling. However, the plugin provided sufficient hooks, to enqueue my own stylesheet, or scripts (if needed). Which was exactly what I needed.

If you wanted to do the same, i.e., create a custom maintenance mode page with custom styling, this is what you’d have to do.

[space]

Adding Custom Structure for Maintenance Mode Page

You could use the option provided by the WP Maintenance Mode plugin to add custom HTML on the maintenance mode landing page. The option can be found under Settings -> WP Maintenance Mode -> Design.

I tried this option. It worked, how it was supposed to, but not according to my requirements. The issue was that I had to change the entire structure of the page. Whereas the plugin, changed only the content on the page. If that works for you, you probably don’t need the code suggested below.

But if you want to change more than the content, you can use the ‘wpmm_text’ and ‘wpmm_styles’ hooks. The ‘wpmm_text’ hook can be used to add HTML content, whereas the ‘wpmm_styles’ hook can be used to add custom styling.

You can use the sample code below, to get yourself started:

// add your HTML code
add_filter('wpmm_text', 'wdm_text');
function wdm_text($text){
    $text = '<div class="wdm-wrap"> your custom data </div>';
    return $text;
}

// add your stylesheet by overriding the existing one
add_filter('wpmm_styles', 'wdm_styles');
function wdm_styles($styles){
    // override the default stylesheet
    $styles['frontend'] = plugins_url('style.css', __FILE__);
    //add a new stylesheet
    $styles['my_custom_css'] = plugins_url('custom-style.css', __FILE__);
    return $styles;
}

The WP Maintenance Mode plugin also provides you an option to add your custom JavaScript files as well. You can use the ‘wpmm_scripts’ hook to add your scripts, like the example below:

//Add your custom JavaScript files
add_filter('wpmm_scripts', 'wdm_scripts');
function wdm_scripts($scripts){
    $scripts['my_custom_js'] = plugins_url('custom.js', __FILE__);
    return $scripts;
}

Wondering where you could add all this code? You could merge all of the above code, and create an add on for WP Maintenance Mode plugin.

[space]

The WP Maintenance Mode plugin provides you several additional options. For example, there are options to overwrite page title, or add a heading for your landing page. So it’s worth the try. Next time if you’re faced with creating a custom maintenance mode landing page, do take a look at the WP Maintenance Mode plugin. It gives you a boost, because it takes care of the basics, but allows you to change the layout as well. And if you have any doubts, you could send them to me using the comment section below!