How To Create An Under Construction Page In Wordpress

Read Time: 8 mins Languages:

In a recent tutorial, I showed you how to create a coming soon page in WordPress. The primary purpose of a coming soon page is to let people know that you plan to launch a product or service soon. In this tutorial, you'll learn how to create an under construction page in WordPress.

You might be thinking that a coming soon page and an under construction page are not very different. Well, you would be right. They both indicate that something will be ready for you to use soon. However, there is a subtle difference, and that's why we will approach this problem a bit differently here.

A coming soon page can be about a product, event, company, or a whole website. However, it doesn't make as much sense to create an under construction page for an event or a company. An under construction page can be about your whole website being under construction, or it can just refer to some section of a website that you are actively working on or maintaining.

In this tutorial, I'll teach you how to create a WordPress under construction or maintenance page that lets users access other parts of the website. You will, of course, be able to show the under construction notice for the whole website as well.

Here is a preview of the final result of our Under Construction page that lets users know that we are currently creating a Menu Generator for them so affected parts of the website will be inaccessible for some time.

Finding the Right Plugin and Initial Planning

The first step would be to find the right plugin. We are looking for something that will let us have complete control over the text on the page. It should also give us reasonable flexibility regarding the visual appearance like setting a background color, font family, or logo. Two more features that I would like in the plugin include the ability to restrict or allow access to a specific set of pages and to be able to use CSS to modify the page in more powerful and unique ways. The plugin that met all these requirements for me was the Maintenance plugin.

I would highly recommend that you take a similar approach when searching for plugins. Make a list of features that you want, and then actively filter out plugins which don't meet your criteria. This will save you a lot of time instead of using the first plugin you find and then discovering that it doesn't do exactly what you want.

Keeping Users Informed

We will be adding a section to our under construction page to let users know what we are planning to do. This could include things like interesting features or a possible release date. You can also provide them with links to some other posts on the website where they could read more about it.

Provide Easy Ways to Connect

Now that people visiting the under construction page know what you are doing, it makes sense to let them know that they can be part of the process. Using the skills you learn in this tutorial, you'll be able to add a link to a "Contact Us" page.

Create a WordPress Under Construction Page

We will begin creating our under construction page by installing the free maintenance plugin. Once you have installed and activated the plugin, it will show up in the navigation menu on the admin dashboard. You can see the current status of the plugin from the admin toolbar.

Once the maintenance mode is turned on with this plugin, try visiting any page on your website either in a private window or after logging out from the current session. It should show you a generic maintenance page similar to the image below.

We will now start modifying this page so that the text says something like "under construction".

Changing the Text

Let's begin by changing the text that we show to users. Click on the Maintenance is On link in the admin toolbar to directly open the plugin settings page. You can also select Maintenance from the navigation menu in the admin dashboard to go to the settings page.

Change the page title to "Menu Generator" is Under Construction and the headline to Creating the Best "Menu Generator" Tool for You. Now put the following HTML in the Description field.

<section class="main-content">   <p>We know that creating navigation menus for your website can be tricky. So, we are creating an awesome menu generator for you.</p>   <p>Here are some articles for you to read while we are building the Menu Generator.</p>   <ul>     <li><a href="/navigation-menu-types/">Different types of navigation menus.</a></li>     <li><a href="/navigation-and-accessibility/">Navigation menus and accessibility.</a></li>     <li><a href="/mega-menu-tips/">Tips for building a mega menu.</a></li>   </ul> </section>

Your plugin settings page should now look like the following image. Please note that the HTML for the Description field goes under the Text tab. This allows us to write the content for the page in HTML so that we can target specific elements later using CSS rules.

Click on the Save Changes button and hit Preview to see the updated version of our under construction page. It should look similar to the image below.

Updating Images and UI Colors

Now it's time to make some changes to the appearance of our under construction page. We will begin with the images. If you scroll down a little bit on the plugin settings page, you will find an option to upload a logo as well as a background image.

First, click on the Upload Logo button and choose your website logo from the media library. After that, click on the Upload Background button and pick an image that you like the best. I have used this User Experience illustration from Reshot.

Did you notice a lock icon in the previous preview images of our construction page? Clicking on the lock icon opens a login form that you can use to log in to the website and see all the restricted pages hidden by the plugin.

You can set a new background color for the login form in the plugin settings. There is also an option to change the color of the font. We will leave them all at their default values but change the Font Family from Open Sans to Yanone Kaffeesatz.

Maintenance Plugin Color and Font Settings

Click the Save Changes button, and the construction page should now look similar to the following image.

Construction Page Color, Font and Background Preview

Adding Custom CSS

Our under construction page is now starting to take shape, but there are a few things that I would like to change. There isn't enough contrast between the logo and the background, so we will add a white background along with some borders using CSS.

The font size seems too small for the main content as well. So we will be increasing the font size and making some other changes like adding a semi-transparent black background. We will also change the alignment of the text to left. All this can be done with the help of following CSS rules.

div.logo-box img {     background: white; 	border-bottom: 10px solid black; 	border-top: 10px solid red; 	padding: 10px 0; 	border-radius: 30% 70% 70% 30% / 30% 70% 40% 70%; }  section.main-content {     font-size: 1.8rem;     width: 800px;     margin: 0 auto;     background: #00000024;     padding: 50px;     text-align: left;     box-shadow: 0 0 4px #000000a6; }  section.main-content ul {     list-style: none;     line-height: 1.5; }  body.maintenance section.main-content p {     font-size: 1.8rem; 	margin-bottom: 2rem; }  .site-content h2.heading {     font-size: 3.8rem;     margin-bottom: 3rem; }  footer {     font-size: 1.8rem; }

You need to paste all these CSS rules in the Custom CSS section on the plugin settings page. Now, click on the Save Changes button, and the under construction page should start looking like the image below.

Allowing Access to Certain Pages

The under construction page of our Menu Generator links to three different posts on our website. It wouldn't make much sense if clicking on those links redirected users back to the under construction page.

We can solve this problem by excluding some pages from being under maintenance mode in the plugin settings. This will make these pages accessible to all our visitors. Scroll to the bottom of the settings page and enter the name of published posts that you want the public to access under Posts.

Final Thoughts

In this tutorial, you learned how to create an under construction page for a website using a free plugin. We began by updating the text to provide users with all the necessary information about our under construction page. Then we added a relevant background image as well as the website logo so that nothing looks out of place. Finally, we used custom CSS rules to make changes to the appearance of the logo and other text on the page.

You might have noticed that the page currently contains no contact information for visitors. This has been left out as an exercise for you. Try to follow the steps listed in the tutorial and add a link to the Contact Us page inside the main content.

Monty Shokeen

Freelancer, India

I am a full-stack developer who also loves to write tutorials. After trying out a bunch of things till second year of college, I decided to work on my web development skills. Starting with just HTML and CSS, I kept moving forward and gained experience in PHP, JavaScript and Python. I usually spend my free time either working on some side projects or traveling around.