Spider Blogging - The Ultimate Blogging Solution

Home
How to

How to Create an Attractive WordPress Maintenance Page?

Create a Attractive WordPress Maintenance Page during Web Development.

 When you update the website, some features may not work properly or the website may not be accessible at all. Visitors also think your website is unusable. As a result, they will not visit again.

To avoid such things, you should activate the maintenance page. This feature notifies that the website is temporarily inaccessible. Then, how to make it?

Well, in this article, you will learn a tutorial on creating a maintenance mode page with several options. However, first, let's look at the understanding and importance of installing the following maintenance page. 

 

How to Create an Attractive WordPress Maintenance Page ?
How to Create an Attractive WordPress Maintenance Page ?

What is an Under Maintenance Page? 

Under Maintenance Page is a website page created to notify visitors that the website is under repair or development. So the website cannot be accessed.

Maintenance mode helps you hide the display of errors or blanks that may appear when updating a website, especially WordPress updates . So, instead of visitors seeing an error or blank display, you can activate an attractive maintenance mode display.

You can modify this page according to your needs. For example, to display maintenance information, the countdown time for the website to be active again, and a contact form so that visitors can contact you directly to get the latest information. 


When and Why Do You Need to Enable Maintenance Mode?


If you ask when to activate maintenance mode? The answer is when you want to update the website.

Indeed, updating content, themes, or plugins can be done while the website is active without going down. However, in fact not all website updates are that simple.

For example, you want to update your WooCommerce online store that has a lot of visitors and traffic. For example, there is a problem when updating, the website may go down and suddenly cannot be used.
 
As a result, your visitors will find your website has errors or poor page views. For example, blank or messy site. They will think your website is unusable. This certainly affects the image of your business in the eyes of customers, right?

Therefore, you need to create a maintenance mode page to let customers know the website is in development and come back at a later time.

How to make a maintenance page is also not difficult. Check out the tutorial in the following discussion. 
 

4 Simple ways to Create Maintenance Page in Wordpress

Here are four ways to create a WordPress maintenance page that you can try:
  • Using the maintenance mode plugin
  • Using the page builder
  • By Editing the file function.php
  • By Editing the .htaccess file

You can choose one of the four methods above which is easiest for you. Here's the full explanation.  

1. Using the Maintenance Mode Plugin

WordPress has provided various maintenance plugins that you can use to create repair pages. This method can be the best choice if you don't want to bother fiddling with your website with coding.

In this tutorial, we are using the plugin SeedProd which is a popular maintenance plugin. Here's how to use it. 

Step 1. First login to your WordPress dashboard. After logging in, select the menu Plugin > Add New .

Step 2. Then install search for the SeedProd plugin in the search field. Click Install > Activate to activate the plugin.

Step 3. Once active, click the menu SeedProd > Pages. Then click Create First Page .

Step 4. Select the type of page you want to display. You can select Coming Soon Mode if your website has just been released and Maintenance Mode to notify visitors that the website is under repair. Then click Edit Page on the type you choose.

Step 5. Customize the appearance of the maintenance page according to your needs. Just drag and drop the elements you want to add. Such as logos, image backgrounds, subscribe forms, countdown times, and more.

Step 6. When finished, click Save, then Publish . Next, you will get a notification that the maintenance page has been displayed on your website. 

2. Using Page Builder


In addition to using plugins, you can also create a website maintenance mode using a page builder. WordPress has provided a page builder plugin that is easy for you to use.

Well, in this tutorial, we're using the popular page builder plugin, Elementor . This Elementor page builder will make it easier for you to create and edit website pages, including maintenance pages.

Step 1. Install and activate Elementor page builder. Click the menu Plugins > Add New . Then look for the Elementor page builder plugin. Click Install Now then Activate to activate. 

Step 2. Once active, click the menu Elementor > Tools. Select the menu tab Maintenance Tools . On this menu, if it's your first time creating a page with Elementor, click create one.  

Step 3. Create a title for the page you are going to create. Then click Publish . After that, reopen the page and click Edit with Elementor . 

Step 4.You can customize the maintenance page with the available Elementor widgets. Well, because maintenance pages basically don't need headers and footers, you need to remove them first. To do this, click the button Settings in the lower left corner. 
 
Step 5. Click the drop down menu on Page Layout , then select Elementor Canvas . 
 
Step 6. Now you can start designing your maintenance page on the following blank screen. You can add a background, create a title, and a contact form. 
 
Step 7. When finished creating the maintenance mode page, click Publish. Then go back to the menu Elementor > Tools > Maintenance Mode. Replace Choose Mode with Maintenance or Coming Soon. Then select the menu Choose Template with the page you just created.  
 
Step 8. Click Save Changes to save the settings. Next you will get a notification that Maintenance Mode has been activated. 

3. By Editing File Function.php


In addition to the two methods above, you can create a maintenance page by editing the file function.php . This step is a way to display the default maintenance page in WordPress.

Anyway, before you start editing, make sure you have backed up WordPress files your to make sure all your data is safe. If so, consider editing the following Function.php file!

Step 1. Select the menu Appearance on the dashboard, then select Theme Editor . Then select Theme function or file function.php . 

Step 2. At the bottom of the function.php file, add the following code:  
// Activate WordPress Maintenance Mode
function wp_maintenance_mode() {
if (!current_user_can(‘edit_themes’) || !is_user_logged_in()) {
 
wp_die(‘<h1>Website Under Maintenance</h1><br />We have got some exciting updates lined up for you. We will be back online in a jiffy!’);
 
}
 
}
 
add_action(‘get_header’, ‘wp_maintenance_mode’);

When you've finished adding the code, don't forget to click Update File to save the file changes.

To disable the under maintenance page, you can delete the code you just added to the function.php file.

 

4. By Editing the .htaccess File

There is one last way to create a maintenance page, namely by editing the .htaccess file. In this method, you need to understand coding to create an HTML file that contains a message that the website is under maintenance. Then, upload the file on the website and redirect it using the .htaccess file.

Anyway, don't forget to back up the .htaccess file first. So, if the website error, you can do a restore. If so, now consider the following discussion:

Step 1. Login to your hosting account's cPanel.

Step 2. After entering the cPanel page, click the menu File Manager .   

Step 3. After opening the File Manager, open the folder public_html . Then click the menu File and create an HTML file containing information that the website is under maintenance. Save the file, for example with the name "maintenance.html".

Step 4. After creating the maintenance.html file, rename the .htaccess file, for example with the name “.htaccess_original”.

Step 5. Then, create a new .htaccess file to redirect web pages to the HTML file that you have created. Add the following code to the .htaccess file

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} !^/undermaintenance\.html$
RewriteRule ^(.*)$ https://mydomain.com/maintenance.html [R=307,L]

Please replace https://mydomain.com/maintenance.html with the domain name and HTML file you created.
Now, to disable the maintenance page, you just need to delete the new .htaccess file and rename the .htaccess file as before. 

The Knot

Maintenance page mode serves to notify visitors that your website is under development. So instead of thinking your website isn't working and just walking away, visitors can come back again or call you right away.

How to make website maintenance is also not difficult. Especially if you use WordPress. You can use a maintenance plugin or a page builder plugin to create an easy and attractive maintenance page.

In addition to the above method, if you have coding skills, you can create an under maintenance page by editing the function.php and .htaccess files.

If you have any quires you can comment below.