My HP

19th April, 2020 | Getting Started |

How to add a coming soon or maintenance page to WordPress

A coming soon, or maintenance page can be essential to help let your customers know if your website is currently unavailable. You may want to set up a coming soon page if you're developing a brand new WordPress website on a live domain, or a maintenance page for when you need to do WordPress updates / design updates that may cause disruption to visitors of your site.

There are plenty of ways to achieve this, however one of the easiest ways to do this is to set up a plugin within WordPress called Coming Soon Page, Under Construction & Maintenance Mode by SeedProd which we will show you how to install and set up below.

This will allow you to have a coming soon, or maintenance page that anyone visiting the website will be shown (once enabled), however you will still be able to view and edit your WordPress website as normal once you are logged in  as an administrator.

Please note that there are various other coming soon and maintenance mode plugins available directly from the WordPress plugin repository which can help you achieve the same results if you do not wish to use the plugin used in this guide.

Installing the plugin:

Firstly you will need to log in your WordPress admin area / dashboard - This will normally be at a URL such as mydomain.com/wp-admin  (replacing mydomain.com with your own domain name)

Once logged in, hover over Plugins on the left menu, then click on the Add New option.


Next, In the Search box in the top left of the screen, enter Coming Soon Page then press enter. This will search for the plugin from the WordPress plugin repository, and also show related plugins in the search result.

You should see Coming Soon Page, Under Construction & Maintenance mode by SeedProd appear as the first result. Click on the Install Now button to install the plugin on WordPress


Once installed, the button will change to a blue Activate button. Click this to activate the plugin.


After you click on the Activate button you will be taken to the main settings page for the plugin, which will look like the below image.

This is where we will set up our coming soon or maintenance page.


Firstly, before enabling the coming soon, or maintenance page in the General settings box, you should design the page that you would like visitors to see when they load your website.

Note: Once you do enable the coming soon, or maintenance page - The page that you have designed will be all that visitors will see when viewing your website.  However once you log in to your website as an administrator via wp-admin you will see the website as normal so that you can continue working on it as required.

The first items that you will want to adjust are found in the Page Settings box on the main plugin settings screen. Update the following as required:

Logo - Browse your WordPress media library, or upload and add your websites logo here, to be displayed on the page.

Headline - This is the main headline text that will be shown at the top of the page.  For our guide we're going to set up a Maintenance Mode page, and so we've entered "Back Soon!"

Message - This the main bulk of text you would like to appear underneath the page headline.  Again as we're setting up a Maintenance Mode page in this guide, we've entered a short sentence to state the site is currently down for routine maintenance. As this box acts the same as the standard WordPress editor, you can also add in short codes, links etc should you wish to add any interactivity to your Page - such as a contact form, or newsletter signup.

Once you're happy with the content you've entered, click on the Save All Changes button.


At the bottom of the main plugin settings page (on the content tab), you will also find a section for adding your websites Favicon, As well as an SEO Title & Meta description - to be shown on search engine results (which can be useful if your page will be enabled for some time).

Finally you can also enter your Google Analytics code here.

Again - if you update any information in this section, click on the Save All Changes button once done.


At this point, if you want to quickly check how the logo you've chosen, or text entered looks on your page - the plugin offers a Live Preview mode for you to check this before you fully activate the page.

Simply click on the Live Preview tab at the top of the plugin settings page, and this will open a new window or tab in your web browser to show you how the page will look.

Note: You will need to Save All Changes in the content box you were editing before clicking on the Live Preview button, to ensure all edits / changes are shown in the preview.

You can go back and use the Live Preview as much as you need whilst designing your page.

This is how our page preview currently looks with the example content we entered in the last step:


When you're happy with the Logo / Text content you've entered in during the previous step, you may then want to further edit the page design - such as background image & colour, text and link colours, or even custom CSS.

To do this, click on the Design tab within the plugin settings.

This page will give you plenty of flexibility to fine tune the design of your page.  If you need to use custom CSS code, use the Template box at the bottom of the Design page to enter this.

In this example, as we're only creating a basic maintenance mode page, all we will do is adjust the background colour to Grey, and then change the font colour to white.

Once done, click on the Save All Changes button.


Next, if you have any custom scripts that still need to be loaded or run on the page when someone visits the site, this can be added via the Advanced section.

To do this click on the Advanced tab of the plugin settings.

On this page you can enter scripts for either the Header or Footer (For example - perhaps you have a live chat, or tracking script you would still like to be active on the page, if so you can simply add the code to the "Header Scripts" section).

If you already have a complete HTML template for your coming soon or maintenance page, you can also paste this completely in to the Custom HTML box, which will override the plugins page template.

Again, once done click on the Save All Changes button.


The final step, once you have your page designed and are happy with the Live Preview, is to enable the page via the plugin settings.

To do this, firstly ensure that you're on the Content tab of the plugin settings.

Then near the top you will see the General box, which has the page "Status" options.  By default this is set to Disabled - meaning that visitors to your site will see your WordPress site as normal.

Once you're ready to enable your page, select the option which best suits the page you have created:

Enable Coming Soon Mode - This will enable your page, and allow search engines to start, or continue to index the website. This is the option you would choose if you're in the process of setting up a new WordPress site.

Enable Maintenance Mode - This will enable your page, and tell search engines that the website is unavailable via a 503 code in the header, which should not negatively effect your WordPress sites reputation on search engines.

For a more in depth explanation and comparison of the two modes, please see this article directly from the plugin developers.

When you've chosen the page mode to enable, click on the Save All Changes button.

That's it! your coming soon or maintenance mode page is now enabled. We would suggest having a check of this to ensure it's loading and displaying ok, by either logging out of your WordPress site and trying to view the homepage, or visit your WordPress site in another browser / private browsing window.

If you ever need to disable the page, this can be done by logging in to your WordPress site and then set the status to: Disabled

Comments