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

Before starting work on a recent client project, I had to put their website into maintenance mode.

I like to call it, ‘the out-of-work’ mode. WordPress Maintenance mode keeps the business going even when your site is temporarily down.

It allows you to craft a custom, on-brand experience that informs customers, manages expectations, and even captures leads.

So, undoubtedly, it’s important as you get a chance to maintain momentum and keep your customers satisfied even when your WordPress website is offline.

______________________________________________________________________________________________

Usually, I’m pretty okay with plugins handling this for me. However, this time around, I had to create my own custom WordPress maintenance mode page and style it differently.

This was because the client had provided a PSD (Photoshop Document), for the WordPress maintenance mode page. Okay! “Will do”, I told myself because 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

 

Why Custom WordPress Maintenance Mode Pages Matter??

Generic maintenance pages can hurt your brand image and user experience. This section will explain why creating a custom maintenance mode page is worth your time.

________________________________________________________________________________________________

• Maintains brand consistency during downtime: A custom WordPress maintenance page that matches your branding and visual identity helps reinforce your professional image, even during website downtime. This is crucial for WooCommerce stores & LearnDash platforms where the website is a critical touchpoint for visitors/prospects, not just customers!

________________________________________________________________________________________________

• Keeps visitors informed with customized messages: It helps manage customer expectations and reduces frustration by directly communicating the problem or reason for downtime right off the bat. The expected duration of the maintenance and any impact on services is made clear beforehand so everyone’s on the same page!

________________________________________________________________________________________________

• Reduces bounce rates during maintenance: A well-designed custom WordPress maintenance mode page that provides a positive user experience is less likely to drive visitors away. Customers or visitors are also more likely to return after some time.

________________________________________________________________________________________________

• Provides opportunities for lead capture: You can continue to engage with your audience and keep growing your email list. Just add a persuasive interaction lead generation element like a newsletter to your WordPress maintenance mode page and you’re good to go.

________________________________________________________________________________________________

• Offers better control over the user experience: The site is under maintenance but your creativity isn’t! By creating a custom WordPress maintenance mode page, you own the content, design, and user experience.

 

Pro Tip: While this guide walks you through creating a custom WordPress maintenance mode page yourself, the process can be tedious and time-consuming.  Many business owners find that partnering with professional WordPress maintenance services is a far more efficient solution.  If you think you need help with this, our specialized teams handle everything from custom page design to seamless site updates, letting you focus on your core business initiatives.

Using the WordPress Maintenance Mode Plugin

This section will explain how I went about setting up the maintenance mode using a recently discovered WordPress maintenance mode plugin.

After searching, getting distracted, and searching some more, I found this plugin: WP Maintenance Mode – LightStart.

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 nitty-gritty 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.

 

Adding Custom Structure for WordPress Maintenance Mode Page

You could use the option provided by the plugin for WordPress Maintenance Mode 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 WordPress 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.

 

The WP Maintenance Mode plugin provides you with several additional options.

For example, there are options to overwrite the 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!

How to Create Custom WordPress Maintenance Mode Pages: Step-by-Step Guide

This section will elaborate on the code-based or technical solutions to achieving custom WordPress maintenance mode pages for different WordPress-based use cases or sites.

For Your Standard WordPress Websites

1. Create a new file named maintenance.php in your theme directory
2. Add the following code:

PHP:

 

<?php $protocol = $_SERVER[“SERVER_PROTOCOL”]; if ( ‘HTTP/1.1’ != $protocol && ‘HTTP/1.0’ != $protocol ) {     $protocol = ‘HTTP/1.0’; } header( “$protocol 503 Service Unavailable”, true, 503 ); header( ‘Content-Type: text/html; charset=utf-8’ ); header( ‘Retry-After: 3600’ ); ?> <!DOCTYPE html> <html lang=”en“> <head>     <meta charset=”UTF-8“>     <meta name=”viewport“ content=”width=device-width, initial-scale=1.0“>     <title>Site Maintenance – Coming Back Soon</title>     <style>         body {             font-family: Arial, sans-serif;             background-color: #f5f5f5;             display: flex;             align-items: center;             justify-content: center;             height: 100vh;             margin: 0;         }         .maintenance-container {             text-align: center;             padding: 2rem;             background: white;             border-radius: 10px;             box-shadow: 0 2px 10px rgba(0,0,0,0.1);             max-width: 600px;         }         h1 { color: #333; }         p { color: #666; }     </style> </head> <body>     <div class=”maintenance-container“>         <h1>We’re Making Things Better!</h1>         <p>Our website is currently undergoing scheduled maintenance. We’ll be back online shortly.</p>         <p>Thank you for your patience.</p>     </div> </body> </html>

 

For Your E-Learning/LearnDash Websites

For LearnDash sites, you might want to include course-specific information:

PHP:

 

// Add this to your maintenance.php file <div class=“learndash-notice”>     <p>Course access will be restored by [estimated_time]</p>     <p>Need immediate assistance? Contact our support team at [email]</p> </div>

 

For Your WordPress-based E-commerce or WooCommerce Stores

WooCommerce stores require special attention to handle pending orders:

PHP:

 

// Add this function to your functions.php function custom_woo_maintenance_mode() {     if (!current_user_can(‘administrator’)) {         wp_die(             ‘<h1>Store Maintenance</h1>             <p>Our store is currently being updated. Please check back in 30 minutes.</p>             <p>All pending orders are safe and will be processed once we’re back online.</p>‘,             ‘Maintenance Mode‘,             array(‘response‘ => 503)         );     } } add_action(‘template_redirect‘, ‘custom_woo_maintenance_mode’);

 

⭐If you’ve made it so far, I’m glad⭐ But if you’re overwhelmed with all the work that’s needed to set up a custom WordPress maintenance mode page, you can take our FREE consultation call + 30- day free trial

Next Steps: Need Extra Support For WordPress Maintenance Mode? 

Not Sure If You Need Help? Do This Next

If you’re unsure whether you need third-party assistance for creating and setting up a custom WordPress maintenance mode page, here are a few quick steps to evaluate your needs:

First, take a close look at your current WordPress maintenance process – how much time and resources are you spending on it? Is it interfering with your core business goals?

Next, consider how critical your website is to your operations. Is maintaining a seamless, on-brand experience during downtime essential?

Now, research reputable WordPress maintenance service providers and compare their capabilities to the effort required to handle it in-house.

Test your WordPress maintenance mode implementation to ensure it’s working as expected. And don’t forget to keep a backup of your custom page code.

Too much information? We’ll summarize the steps for you!

• Evaluate your current WordPress maintenance processes
• Consider the time and resources spent on website maintenance
• Research reputable WordPress maintenance service providers
• Test your WordPress maintenance mode implementation before you need it
• Keep a backup of your maintenance page code for emergencies

 

Still unsure if outsourcing is right for you? Let’s discuss your specific needs! – It’s FREE 🙂

We’re happy to help you find the best solution to keep your WordPress website running smoothly while you focus on growing your business.

Conclusion

Creating a custom WordPress maintenance mode page is more than just putting up an “Under Construction” sign.

It’s about maintaining professionalism, keeping users informed, and protecting your site during critical updates. 

It provides a positive user experience that requires careful planning and technical expertise.

While this guide provides the technical knowledge needed to implement maintenance mode, the process can be both time-consuming and tedious.

You can certainly handle this in-house if your bandwidth allows. However, many businesses opt to outsource their WordPress maintenance to professional service providers like us. 

We can work closely with you to:

• Design a custom WordPress maintenance mode page that reflects your brand
• Implement the maintenance mode functionality seamlessly
• Provide ongoing monitoring and updates to keep your site running smoothly
• Offer support and emergency assistance when you need it

 

I know trust doesn’t come easy! I get it and it’s understandable. You can also take advantage of our 30-day Free trial to experience the quality of our work first-hand. 

If you like what we do, let’s work together to ensure a pleasing and cohesive experience for your visitors and customers. 

Take Our Free Consultation Call + 30- day Free Trial