Countdown Timer Redirect Plugin for WordPress

By Webmaster

Posted: 13m & 18d ago
2 min read

👁 Views: 547

(0) Leave a Comment

Shortcode - WpScriptly

Introducing the Countdown Timer Redirect Plugin for WordPress! This plugin allows you to easily add a countdown timer to your site that redirects users to a specified URL after the timer reaches zero. With straightforward setup and the ability to customize the appearance through an external CSS stylesheet, this plugin ensures a seamless and visually appealing user experience. Enhance your site’s functionality with this user-friendly redirect timer.

I use this for a thank you page for my Fluentforms then redirect a user to the homepage.

  1. First create a form and go in the settings & Integrations -> Confirmation Settings
  2. Change confirmation type to a page.
  3. Create and Select the thank you page you created.
  4. Next in the thank you page place the shortcode at the bottom of the page.
  5. That is it, now all the user will be able to read the thank you message then be redirected to any page.

I use fluent snippet plugin for all my functions, js, and CSS:

Script:

function redirect_timer_enqueue_scripts() {
    wp_enqueue_script('redirect-timer-script', plugin_dir_url(__FILE__) . 'redirect-timer-script.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'redirect_timer_enqueue_scripts');

// Shortcode to display the countdown timer
function redirect_timer_shortcode($atts) {
    $atts = shortcode_atts(array(
        'url' => home_url(),
    ), $atts, 'redirect_timer');

    $output = '<p id="redirect-message">You will be redirected to the homepage in: ';
    $output .= '<span id="countdown">15</span>';
    $output .= ' Sec.</p>';
    $output .= '<script type="text/javascript">
        var redirectUrl = "' . esc_url($atts['url']) . '";
    </script>';
    return $output;
}
add_shortcode('redirect_timer', 'redirect_timer_shortcode');

// JavaScript code
function redirect_timer_script() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        var countdown = 15;
        var interval = setInterval(function() {
            countdown--;
            $('#countdown').text(countdown);
            if (countdown <= 0) {
                clearInterval(interval);
                window.location.href = redirectUrl;
            }
        }, 1000);
    });
    </script>
    <?php
}
add_action('wp_footer', 'redirect_timer_script');

CSS:

Customize the CSS to match your website.

#redirect-message {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    text-align:left;
}

#countdown {
    font-size: 16px;
    font-weight: bold;
    color: #e74c3c; /* Red color */
}

Shortcode:

Replace the url with any page or website you want to send a user to.

[redirect_timer url="https://wpscriptly.com/"]
Author: Webmaster, Admin at WpScriptly

Hey, I’m Scot, the guy behind WpScriptly. I create simple, no-fluff WordPress plugins and tools to make your site easier to manage and more powerful. Everything I build is tested on my own projects first — if it’s here, it’s because it works. Thanks for checking out the site. Hope you find something useful at Wp Scriptly.

*These scripts and plugins are provided as is with no guarantees or warranties. If you need assistance or run into issues, feel free to reach out via the contact page.

Add your first comment to this post