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.

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.

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.

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";

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";

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