The Problem

We’ve all been there; the process of building or modifying a website could last anywhere between a couple of minutes to a couple of months. The problem, however, is that usually you don’t want your visitors to see your progress. Instead, you’d like to redirect them to an attractive and actionable page that would:

  1. Tell them that the site is Under Maintenance (or Under Construction),
  2. Let them know when the site will be finished,
  3. Make use of their visit by redirecting them to your social media profiles or a contact form.

There are a couple of ways to do this with the way described here being probably the easiest and fastest to set up.

The Solution

DP Maintenance Mode is a very powerful plugin that allows you to create a clean, well designed and feature-rich Under Construction or Under Maintenance page in an efficient and easy-to-use manner. In this tutorial, we’ll go through setting up the Lite version of the plugin which you can download for free from the WordPress Plugin Directory.

The free version of the plugin is almost full featured and more than enough for most users. If you are curious though, there is also a paid version of the plugin with a bit more options and 8 more beautiful designs. This version you can check out here.

How to Set it up?

This guide will lead you through 8 steps we’ve used when setting it up on one of our client’s websites: onit.us.

Each step will have an accompanying image as well on which you can click to zoom in.

In your WordPress Admin area, click on Plugins and then on Add New.

Then, in the search bar on the top right, type “DP Maintenance Mode” and hit the Enter key on your keyboard.

Find the plugin in the search results and click the Install button. After the Install is complete, click the Activate link and you’re all set!

After you have activated the plugin, navigate to it’s settings by clicking on the new Maintenance Lite item in your WordPress navigation menu

Active: Checking this box activates the DP Maintenance Page Overlay.

Theme: In the Free version you have an option between two styles, the light (Default) or the dark.

Logo: Simply upload your logo (preferably with a transparent background). As far as the size goes, we’ve found that around 300px in width works best.

User Roles: If you leave it at default settings, the page is displayed to logged out visitors, anyone logged in will see the “normal” site. Selecting any specific role here will show the maintenance mode to that user level and downwards, even when logged in.

The rest of the fields are pretty self explanatory.

You can click Save now or continue with the rest of the steps and click Save when you’re done with all tabs.

This tab enables the countdown timer on the page.

Even though it’s optional, It is highly suggested that you enable it as the absence of it makes the page look really unfinished and off.

You will see that you have the standard On/Off Checkbox, some fields for translating the text displayed and an expiration date selector. At the bottom, there is another checkbox that, when checked, will automatically deactivate your Maintenance page when the timer expires. Quite useful.

Another very cool feature that’s optional, but still recommended for the same reasons as the widget above.

Unfortunately, the plugin isn’t smart enough to update the progress automatically so you will have to enter the percentages manually. It will feel redundant but it’s nice to keep it updated at least once a day, especially if your timer is set to a relatively long period.

Here you can add links to all your social media profiles + skype and email.

They all get displayed in a form of a cool looking icon which opens the profile in a new tab when clicked.

Optional but highly recommended that you use this as it will help you convert the value you get from incoming traffic.

Here is where it gets just a bit complicated.

Knowing your Twitter username and password will not be enough to display a fancy twitter feed on this page. Due to Twitter’s own restrictions, you will need to create a custom “application” in the Twitter Developer Area and get some keys such as: Consumer Key and Secret, Access Token and Access Token Secret.

This is really not that hard to do but if you’re struggling with it and would like to learn how to do it, make sure to check out our special article dedicated just to this task.

This widget allows you to collect emails from people who’d like to receive your Newsletter.

It is highly recommended that you use MailChimp with this widget. To do this you will need a MailChimp account and an API key. To get the API key just follow this article right here, and if you’d like to read a guide on how to correctly open and set up a Free MailChimp Account, make sure to let us know.

This step comprises of the last two tabs, the Contact Form Widget and Form Validations.

In the Contact Form Widget, you simply have to fill in the email you’d like the emails to go to and then (optionally), replace the default content already written in the other fields. The plugin takes care of the rest.

Form Validation tab is simply a tab where you can modify the automatic responses generated by the plugin, leaving them at default values is definitely not a bad choice.

Finally, don’t forget to hit save and go see your new Maintenance Page live on your site. Remember, you will have to log out from your WordPress Admin area, or (a neat trick) open the site’s url in an Incognito Window mode in Chrome (or other browser).

What Now?

Now, the most important thing you can do is to actually meet your deadline. Especially, don’t let it expire and then have the timer display zero for an indefinite period of time.

In the meantime, keep up the good work, make sure you respond to your clients’ inquiries and, of course, test every single element on the Maintenance Page to make sure it’s working (nothing worse than wondering how come nobody emailed you only to find out your contact form has a typo in it).

Any comments for this article? Make sure to write them in the section below! Also, we would really appreciate the publicity gained by you sharing this article on any of the social networks, thank you in advance.

Contact us

In case you need any advanced help, you can always talk to a friendly expert:

Idolon.us Support

Share This Story

About the Author: huss@perceptively.com