A coming soon page lets your visitors know that your site is almost ready to launch. Even better, you can use it to capture leads and inquiries before you’re officially open.

In this article, you will learn how to make your own “coming soon” page or maintenance mode in WordPress without plugins. You can easily customize your page without writing any code.

maintenance mode in WordPress without plugin

WordPress maintenance mode without plugins

Step 1.Add The Following Code to the functions.php File

In the WordPress dashboard, go to Appearance ➡ Theme File Editor and copy the following code into the theme’s functions.php file and save it.

You must create a child theme before making any changes to functions.php file. Otherwise, the applied changes will be lost after each update.
Create child theme in WordPress step by step [without plugin]

As an alternative method, you can use the Code Snippets plugin to insert your codes into WordPress.

add_action('init', function() {
if (  !is_admin() && !current_user_can( 'manage_options') && $GLOBALS['pagenow'] !== 'wp-login.php'  )  { 

$message = "Sorry for the dust! We know its taking a while but sit tight and well be with you soon.";
$text_color = "white";	
$bg_image = "https://i.postimg.cc/MGJ4vFXj/ba1.jpg"; // https://i.postimg.cc/fy9PQm7t/marc-obiols-qc-ULHs-OGW6g-unsplash.webp
$bg_overlay = "rgb(0 0 0 / 60%)";
// $reopening_date = "Nov 7, 2022 12:00:00";
// $subscribe_list = "subscribe_list";

if (isset( $_POST["email"] ) && wp_verify_nonce($_POST['red_sub'], 'red_sub')) {
	$user_email= sanitize_email($_POST["email"]); 
	$timee = date("Y-m-d");
	$fn = ABSPATH . '/'.$subscribe_list.'.csv'; 
	$fp = fopen($fn, 'a');
	fputs($fp, $user_email.",".$timee."\n");
	fclose($fp);	
	setcookie("red-subscribe", "1", time() + (86400 * 30), "/");
	$form = "done";
}		
?>	
<div class="maintenance">
<h3 id="maintenance-msg"><?= $message; ?></h3>
<?php if ($reopening_date) { ?>	<h1 id="countdown"></h1> <?php } ?>
<?php if ($subscribe_list && !isset($_COOKIE["red-subscribe"]) && !$form) { ?>
<div class="sub-form">	
<p>Notify me when it's ready </p>
<form action="" method="POST">
<input type="email" id="email" name="email" placeholder="Email" required>
<input id="mybtn"  type="submit" value="Subscribe"> 
<input type="hidden" name="red_sub" value="<?php echo wp_create_nonce('red_sub'); ?>"/>		
</form>	
</div>
<?php } elseif( isset($_COOKIE["red-subscribe"]) || $form && $subscribe_list) { ?> <div class="sub-form"> <p>Thank you for the subscription. We'll be in touch with you as soon as possible. </p> </div>  <?php } ?>	
<script>
if (document.getElementById("countdown")) {
var countDownDate = new Date("<?= $reopening_date; ?>").getTime();
var x = setInterval(function() {
  var now = new Date().getTime();
  var distance = countDownDate - now;
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  document.getElementById("countdown").innerHTML = days + "d: " + hours + "h: "
  + minutes + "m: " + seconds + "s ";
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("countdown").innerHTML = "Please wait ...";
  }
}, 1000);
}	
</script>
</div>
 <style>
.maintenance {
	color: <?= $text_color; ?>!important;
<?php if($bg_image) { ?>	background-image: url( <?= $bg_image; ?>);
    background-size: cover;
	background-position: center; <?php } ?>
<?php if($bg_overlay) { ?>	box-shadow: inset 0 0 0 4000px <?= $bg_overlay; ?>; <?php } ?>
    position: fixed;
    inset: 0;
    background-color: white;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
}
#maintenance-msg {
    width: 600px;
    max-width: 90%;
    text-align: center;
    line-height: normal;
} 
h1#countdown {
color: <?= $text_color; ?>!important;
}
div.sub-form p {
    text-align: center;
}
div.sub-form input {
    height: 30px;
	border-radius: 3px;
}
div.sub-form input#mybtn {
    background-color: #0372ff;
    color: white;
    cursor: pointer;
	border: none;
}	 
</style>	
<?php
 wp_die("", "Coming soon!"); 
}} );

By adding this code to the “functions.php” file, site visitors will be presented with the “coming soon” page, and only users with the administrator user role will be able to view the site.

Wordpress coming soon page

Step 2.Customize coming soon page

You can change the text of the “coming soon” page from here.

$message = "Sorry for the dust! We know its taking a while but sit tight and well be with you soon.";

You can change the text color of the “coming soon” page from here.

$text_color = "white";	

You can change the background of the “coming soon” page from here.

$bg_image = "https://i.postimg.cc/MGJ4vFXj/ba1.jpg";

You can change the “coming soon” page background overlay color from here. The chosen color must have transparency, otherwise it will cover the background image.

$bg_overlay = "rgb(0 0 0 / 60%)";

If you want the countdown timer to be activated, uncomment the “reopening_date” variable and enter the reopening date of your site in the format specified.

$reopening_date = "Jan 5, 2025 12:00:00";
Wordpress coming soon page with countdown timer

By uncommenting the “subscribe_list” variable, you can add a subscription form to the page. Choose a unique name for this variable, your leads will be saved in a file with the same name.
For example, if you name this variable “list123”,  you can download your leads through the URL “yoursite.com/list123.csv”.

$subscribe_list = "list123";
Wordpress coming soon page with subscription form

If this article is difficult for you to read in text, you can watch the video version below.

https://www.youtube.com/watch?v=nnKyQ0BrLdE
Share this post
Maya
Maya

Hi, my name is Maya and I’m a WordPress plugin developer. I created this website to share some of the helpful codes that I’ve used in my own projects.
If you’re looking for a custom plugin for your website, you can contact me by clicking on Hire a developer in the menu. I’d love to hear from you.

Articles: 53

Leave a Reply

Your email address will not be published. Required fields are marked *