How to Set Maintenance Mode in WordPress

Not ready to reveal your site to the world?

Putting your site into “maintenance mode” lets you finish working on the site while visitors are shown a simple landing page instead. There’s just one problem…

WordPress doesn’t have a maintenance mode.

The good news is that there is an excellent plugin you can use to add this feature to your site. In this tutorial, you’ll learn how to quickly configure that plugin to create a cool maintenance mode page like this:

example of the maintenance mode screen

Ready? Let’s get started!

The Plugin You Need for Maintenance Mode

There are a number of good choices for adding maintenance mode including:

If you aren’t worried about aesthetics and want to setup a maintenance page ASAP, Maintenance Mode is probably your best choice.

In this tutorial, we’ll be using the excellent Coming Soon Page & Maintenance Mode plugin.

the Coming Soon Page & Maintenance Mode plugin on wordpress.org

Go ahead and activate on your site now, and we’ll cover configuration next.

How to Configure the Maintenance Mode

First, visit the new page added to your Settings menu:

the plugin's settings menu item

When you visit it, you’ll see a settings page with the following options:

screenshot of the maintenance mode settings

As you can see, there are quite a few settings to configure. You won’t have to change many of them, and so you can finish setting up the plugin quickly.

General Settings

The General settings section is where you can enable the maintenance mode on your site. For now, you can leave it disabled.

Page Settings

In the Page Settings section, you can upload your logo. For reference, the logo image used in the example is 394px by 64px.

Next, add a headline that tells visitors the site is in maintenance mode. This is the “We’re in Maintenance Mode” text from the example.

Lastly, use the Message box to explain the page to visitors. You’ll want to let them know why they can’t visit your site right now, and if possible, when they can return.

Header Settings

If you have a favicon you can upload it here to make sure it still displays while you’re in maintenance mode.

For the SEO Title & Description, you can use your headline and message from earlier.

Lastly, you can add your Google Analytics tracking code here if you want to track your visits.

Checking Your Progress

Now that you’ve filled out the basic settings, save them using one of the Save All Changes buttons.

Once you’ve saved, you can click on the Live Preview tab to see what the page will look like.

live preview button

This preview will only show changes after you’ve saved them, and works when you haven’t enabled maintenance mode yet.

At this point, here is what the example looks like:

the current look of the maintenance mode page

While the page is working well enough, the last thing we’ll do is improve the design of it.

How to Design the Maintenance Mode Page

In the settings menu, click on the Design tab at the top. You’ll be taken to another page with the following settings:

screenshot of the Design settings page I know, it looks like a ton more settings, but we’ll quickly navigate through them and be done in a jiffy.

Background Settings

This is where the magic happens.

First, use the button in the Background Image setting to upload an image to use in the background.

the background image setting

For this setting, I used this relevant construction image. You can find tons of other awesome, free images at unsplash.com.

While you can customize the background in other ways, this is the only change we’ll be making in this tutorial.

Content Settings

In the Content settings section, check off the Enable Well option. This will add a box around the logo and text, so it can be seen on top of the background image.

Text Settings

In the Text settings, the only change we’ll make is to switch the font from Arial to Helvetica Neue. It’s a similar, but more attractive font.

Template Settings

At this point, the page is looking pretty good.

screenshot of the current status of the maintenance mode page

There are a few more changes we can make to improve the design.

The remaining modifications can be made with CSS, or with options that come in the Pro version of the plugin. In this case, I’ll be sharing some CSS I wrote to finish the design.

I wanted to make the following changes:

  • Make the content box white
  • Remove the content box border and replace it with a drop shadow
  • Reduce the size of the headline
  • Add more space below the logo
  • Add more space around the content

Here is the CSS I wrote that you can copy and paste into Custom CSS textarea in the Template settings section:

#seed-csp4-content {
  background: #fff;
  border: none;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
  padding: 24px 48px 36px;
}
#seed-csp4-content h1 {
  font-size: 24px;
}
#seed-csp4-image {
  margin-bottom: 36px;
}

Once added, the maintenance mode page is complete:

example of the maintenance mode screen

Conclusion

While you’ll have a different content on your page, you can easily copy this same design with the configuration and CSS shared in this tutorial.

You only need to create your maintenance mode page once, and then you can simply activate it whenever you need it. By the way, don’t forget to enable the maintenance mode when you’re finished!

If you have any questions about the plugin used in this tutorial or about maintenance mode, leave a comment below.

Related Posts

4 Comments

  1. Lumena Lumena

    I will test this plugin!

    Thanks!

  2. Nahuel Gimenez Nahuel Gimenez

    Thanks man! I followed it step by step, and it’s looking great 🙂

    Here’s the link for my page, in case you have any suggestion !

    Also, I’d like to add a subscription button, but I’ve got exactly 0 knowledge of web design, CSS and stuff. I’d really appreciate if you could point me somewhere or give me a hint! I worked as an Oracle DBA, so I can learn this 🙂

    Cheers, keep up the good work!
    Nahuel.

    • Ben Sibley Ben Sibley

      Hey Nahuel,

      Thanks for reading! I just visited your site and it looks like you’ve got the button added now 🙂

  3. Mustafa Mustafa

    It is one of the best plugins i have ever used. I used this plugin in one of the WordPress websites which i handle and the plugin worked for me. Thanks for the detailed information.

Post a comment

Your email address will not be published. Required fields are marked *