WordPress redirect page with countdown timer

If you want to redirect a specific page on your WordPress website, displaying a message along with a countdown timer something like a splash page, redirecting to a internal or external page when countdown reaches zero,then please read on.

This article will describe in detail how to perform the redirect without a plugin.

Step 1 : Add the header JavaScript for the specific page.

You will need to add the header JavaScript for the specific page using your theme’s/child theme’s functions.php file.

The code to add is below the next 2 paragraphs. You must read this important information on the changes you must do to the code in order for the page redirect to work for you.

You will need to replace the post ID. in line 3 with the ID of the page you are wanting to redirect.(to find the ID go to Admin Area -> Pages -> All Pages. Hover the mouse over the title of the page you are targeting. The ID as a number will be displayed in a horizontal popup over the taskbar at bottom left (in windows OS). The link will also popup in the browser in any other OS.

You will need to replace and add the link to which the page should redirect in line 16 . The countdown is set to 10 seconds.If you would like to change that, then replace the values in line 8.

Here is the code to add in your theme’s/child theme’s functions.php file.

function hook_addl_header_elements_for_my_specific_page() {
	global $post; 
	if ($post->ID == 295){
	?>
	<script type="text/javascript">

	(function () {
		var timeLeft = 10,
			cinterval;

		var timeDec = function (){
			timeLeft--;
			document.getElementById('countdown').innerHTML = timeLeft;
			if(timeLeft === 0){
				clearInterval(cinterval);
				location.replace("https://play.google.com/store/apps/details?id=com.mst.prasnaapp&amp;pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1")
			}
		};

		cinterval = setInterval(timeDec, 1000);
	})();

	</script>
	
	<?php
	}
}
add_action('wp_head', 'hook_addl_header_elements_for_my_specific_page');

Step 2 : Create A Page Template to show the redirect message and countdown

In this step create a new page template (opens in a new window). The new page template needs to be selected from the WordPress editor in the Admin Area , for the page being redirected(open the page in the WordPress editor and select the new page template). The page template will have the code to display the message and the countdown timer appearing above the page that is being redirected.

Add the following code from line 6 to 9 in the new page template file at the place shown in the code.You will need to replace the message being displayed as per your requirement.Do not change the div tag in line 8 (you can change the countdown value from 10 to whatever you have set in the java script in step 1)

	if ( have_posts() ) {

	while ( have_posts() ) {
		the_post();
		
		?>
		<div style="color:green;margin:10px 10px 10px 20px;font-size:1.4em;"><b>Your Message Line 1 !<br><br>More Message Line 2.<br><br>Redirecting to the page NEW PAGE ...
		<div align="center" id="countdown" style="color:#41A5E1;font-size:5em;margin-bottom:20px;">10</b></div><br><br>.</div>
	<?php
			
		get_template_part( 'template-parts/content', get_post_type() );

This message will be shown to the user before the page is redirected along with the count down timer, above the page being redirected.

That is all.

If you liked this article please do leave a reply and share it with friends.

Thanks.