Make Countdown Redirect Page For Your WordPress

What is a countdown redirect page? Have you ever clicked on a link, then you see a page that says something like: You’ll be redirected to somewhere after X seconds.

Here is an example.

In the past, I saw some sites do this, and I didn’t know why. Now I understand its benefits and managed to create my own countdown redirect page.

countdown redirect page wordpress

Benefits of countdown redirect page

The clearest benefit of having a countdown redirect page is to reduce your bounce rate. Suppose someone visits your blog and clicks on an external link, there is a chance that you’ll lose them instantly. Having a countdown redirect page not only makes them open a new page on your site, but also makes them stay a bit longer.

One good thing about countdown redirect pages is that people have choices. They can wait for the countdown then being redirected automatically, or just click on the link by themselves. Lot of sites make use of this opportunity then put google ads here, even an opt-in form, or some offers to visitors before they leave.

You can do many things in a countdown redirect page, even make people watch the whole video before leaving, or set the countdown to 999 seconds (for fun). Of course I don’t recommend those, my main aim is to reduce bounce rate, and provide something interesting here, the best is some hint about the link they are going to.

How to make a countdown redirect page?

Step 1 – Make a custom page template in your theme

Create a new file in your theme folder. Name it like redirect.php then put this code in the file, save.

    // Template Name: Countdown Redirect Page 
    // Author: 
    // Version: v1.0 

If you do it correctly, when you create a new page, name it Go, at the template section, you can see our new template name.

Step 2 – The full code of my countdown redirect page

    // Template Name: Countdown Redirect Page 
    // Author: 
    // Version: v1.0 

<?php get_header(); ?>

    $url = isset($_GET['to'])? $_GET['to'] : ''; // set the default redirect url
    $what = isset($_GET['what'])? $_GET['what'] : ''; // description of the link, give people a hint of what they should expect
    $time = isset($_GET['time'])? $_GET['time'] : 15; // set the countdown time
    $set = 'Refresh: '.$time.'; URL='.$url;

<!-- a meta tag that redirect automatically after a time -->
<meta http-equiv="refresh" content="<?php echo $time; ?>;url=<?php echo $url; ?>"> 

<div class="entry" style="text-align:center;padding:20px;">
    <p>You're prepare to explore a treasure that is not on my site...</p>
    <p>If after <strong><span id="timer" data-timer="<?php echo $time; ?>" style="font-size:1.5em;color:red;"></span></strong> seconds, this page won't automatically redirect you to new page, please click the link below</p>
    <p style="font-size:1.5em;font-weight:bold;"><a href="<?php echo $url ?>"><?php echo $url ?></a></p>
    <?php if($what != '') { echo '<p style="font-weight:bold;">About this link: '.$what.'</p>'; } ?>
    <p>Have a good trip, see you later!</p>

<?php get_footer(); ?>

countdown redirect page wordpress

Step 3 – Make the countdown work

After step 2, you can try by typing in your browser something like and see the result. After 15 seconds , the page will be redirected, but you will not see the countdown.

To make the countdown work, you need to put these codes in footer.php in the theme folder, before the body tag.


var elem = document.getElementById('timer');
var timeLeft = elem.getAttribute('data-timer');
var timerId = setInterval(countdown, 1000);
function countdown() {
if (timeLeft == 0) {
} else {
elem.innerHTML = timeLeft ;

Now your countdown redirect page is ready to go!

Basic usage:

To set the countdown manually, e.g. 45 secs:

To put some hint about the url: explain something here (using space like this is okay)


4 thoughts on “Make Countdown Redirect Page For Your WordPress

  1. Thank you for your great sharing. How to make the “countdown” work only when the user still opens the page, open another page -> “countdown” stop. Thank you.

Leave a Reply

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

Theme: Overlay by Kaira
Designed by Nguyen Chu Nam Phuong