How To Create a Customized Maintenance Page in WordPress?

Creating a customized maintenance page in WordPress is super simple, whether you do it manually or if you use a plugin.

Whatever method you choose, I will show you how to set up a maintenance page in a few minutes. As a bonus, I will also show you how to customize it according to your liking.

It does not matter if you are a newbie, a pro web developer, or a web administrator with no technical skills. In this guide, I will provide a simple process for creating a customized maintenance page in WordPress.

Before we begin, I want to explain the difference between WordPress maintenance mode and maintenance page. You will come across both of these terms. Even though they are slightly different, web developers will interchangeably use them.

Why is it used interchangeably? The reason is the purpose. The intent is to inform visitors that the site is temporarily down.

In this guide, I may use both terms, so do not get confused.

Now, moving on to the difference between WordPress maintenance mode and maintenance page.

Maintenance Mode in WordPress

Definition
It is a state where the website will be offline and only accessible to administrators.

Key Features

• The maintenance mode in WordPress starts automatically. It happens during WordPress, plugin, and theme updates.
• Visitors see a simple message.
• WordPress comes out of maintenance mode once updates are complete or after removing the .maintenance file.

When Is It Used?
The maintenance mode appears during site updates. When users visit, it tells them about the temporary downtime.

Maintenance Page in WordPress

Definition
On the other hand, a maintenance page is a customized page visitors see when the site is undergoing maintenance.

Key Features

• Manually enable using a plugin or custom code.
• Add detailed information.
• Replace the default maintenance mode message with a customized design for a better user experience.

When Is It Used?
The maintenance page is used when you want to change the design or content of your website. It is also a great way to show some extra information to the user. For example, many websites show a countdown timer indicating when the site will be back.

Comparison Table

If you are still confused about the difference between the maintenance mode and the maintenance page, here is a helpful comparison table.

I have already answered the “When” above. It is when you need to update your WordPress website. This update could be one of two or both:

• WordPress core, plugin, and theme updates
• Web design content and design update

Let’s focus on the “Why” part.

Why should you put your site in maintenance mode?
Why do you need a customized maintenance page?

These are a few questions you will read, hear, or think about. So, let me put your mind at ease.

Here are two reasons why you should put your site in maintenance mode with a customized message.

1.) Protect Your Reputation With a Customized Maintenance Page

Performing a website content and design update will take time to do.

Imagine visiting a website that is undergoing a design update and seeing broken links and images. What will be your first impression? You will likely think that the website is not well-maintained or professional.

Now ask yourself, what will your site visitors think when they visit your website during the redesign phase? Naturally, it will leave a negative impression.

So, by creating a maintenance page, you can avoid giving visitors a bad first impression.

2.) Surprise Your Visitors with New Features

If you plan to introduce new features, always set up a maintenance page.

It can be a great way to build anticipation and excitement among your site visitors.

By teasing the upcoming changes, you can generate interest and keep users engaged even during downtime. This can lead to a more positive reception of the new features.

Remember to add a countdown timer, engage with your visitors on social media, and send an email blast once your site is up and running.

There are two ways to create a customized maintenance page in WordPress. You can do it quickly by installing a plugin, or you can put your coding skills to the test and develop a page yourself.

Developing a maintenance page from scratch requires work, and you need basic coding skills.

If you are not a web developer, I would suggest jumping straight to the second option.

But if you want to loosen those rusty coding fingers or challenge yourself, follow along to create a the page yourself.

Here is a guide on the requirements, pros and cons, and a basic boilerplate for the maintenance page.

Requirements

• Visual Studio Code or any code editor
• HTML
• CSS
• JavaScript (optional)
• FTP or hosting control panel access (hPanel if you have Hostinger)

Advantages of a Customized Maintenance Page

• Create it once and reuse it on other sites by updating the site name and logo.
• Add custom functionality using JavaScript that may not be available in the plugin or the page builder.
• It is only a single file and does not take up any space.
• Avoids the use of additional plugins, which may slow the website.

Disadvantages of a Customized Maintenance Page

• Time-consuming.
• It is not beginner-friendly if you lack technical knowledge.

Basic Maintenance Page Boilerplate

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, nofollow">
    <title>Site Under Maintenance</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            text-align: center;
            padding: 20px;
        }
        .container {
            max-width: 600px;
            background: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        h1 {
            font-size: 2.5rem;
            color: #0073e6;
        }
        p {
            font-size: 1.2rem;
            line-height: 1.6;
        }
        .contact {
            margin-top: 20px;
        }
        .contact a {
            color: #0073e6;
            text-decoration: none;
        }
        .contact a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>We'll Be Back Soon!</h1>
        <p>Our website is currently undergoing scheduled maintenance to improve your experience. Please check back later.</p>
        <div class="contact">
            <p>For urgent inquiries, contact us at:</p>
            <p>Email: <a href="mailto:support@example.com">support@example.com</a></p>
            <p>Follow us for updates: <a href="https://twitter.com/example" target="_blank">@example</a></p>
        </div>
    </div>
</body>

</html>

Other Things to Include in a Customized Maintenance Page

The boilerplate I provided is a basic page to help you get started. There is nothing fancy. Think of it as the maintenance page skeleton. It is up to you to customize and add more details according to your brand.

Here are a few things you can include:

1. Add your logo. Otherwise, it will not be clear to visitors whose site they are on.
2. Include a brief description of why the site is down.
3. Add contact information or links to social media platforms to engage with your audience.
4. Make it pretty. Add illustrations, animations, and images to make the page visually appealing.
5. Add a countdown timer to inform visitors when the site will be online.

How To Use the Customized Maintenance Page?

• After you have created the page, save it as maintenance.html.
• Log in to your hosting server or use an FTP.
• Navigate to the directory where the website files are stored.
• Upload the file to the root directory.

Some believe creating a manual maintenance page offers more control over the design and functionality. This was true, with emphasis on the was.

With the SeedProd plugin, creating a customized maintenance page is very straightforward

Why Use SeedProd?

Here are five reasons to use this plugin.

1. It is a freemium plugin with more than 10,000 active installations.
2. You can set up the maintenance page within minutes.
3. You can customize the design, include essential elements, and create a professional-looking maintenance page.
4. The templates are mobile-friendly.

Here is a step-by-step guide to creating a maintenance page using the SeedProd plugin:

Step 1: Install and Activate SeedProd

1. Log in to your WordPress dashboard.
2. Go to Plugins → Add New.
3. Search for SeedProd.
4. Click Install Now and then Activate.

Step 2: Enable Maintenance Mode

1. After activation, go to SeedProd → Landing Pages.
2. Under the Maintenance Mode section, click the Set Up a Maintenance Mode Page button.

Step 3: Choose a Template

1. SeedProd will display several pre-designed templates.
2. Browse the templates and select one that fits your design preference by clicking on it.
3. The template will load into the drag-and-drop page builder.

Step 4: Customize the Maintenance Page

You can go with one of the pre-designed templates or further customize it.

To customize it, use the drag-and-drop builder to add elements like text, images, forms, social media links, countdown timers, etc.

Here are some site maintenance example messages you can use:

Professional and Direct

• Our website is under maintenance. Please check back soon.
• We’re currently performing scheduled maintenance. Our site will be back shortly. Thank you for your patience.

Friendly

• We’re making some updates to improve your experience. We’ll be back up and running shortly!
• We will be back soon with new and exciting features!
• Hang tight! We’re performing some maintenance to bring you a better experience.

Step 5: Preview and Publish

1. Click the Preview button to see how the page looks.
2. If satisfied, click Save and then Publish.

Step 6: Activate Maintenance Mode

1. Go back to SeedProd → Landing Pages.
2. Toggle the switch for Maintenance Mode to activate it.

Users visiting your site will now see the custom maintenance page. Administrators (while logged in) will still have full access to the backend.

You can disable the customized maintenance page by logging into your hosting account and deleting the HTML file. Remember to clear your cache to ensure changes take effect immediately.

If you are using the SeedProd plugin, you can disable the maintenance mode by toggling the switch for maintenance mode to deactivate it.

Conclusion

Creating a customized maintenance page is crucial. Do not show your visitors a boring maintenance mode message.

Always customize the page whether you choose the manual method or use a plugin. It will provide a professional and informative look while the site is undergoing maintenance.