Countdown Timer Redirect Plugin for WordPress

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/"]

Notes:

Wp Scriptly

This basic script, CSS style, and plugin are designed to function optimally assuming minimal interference from your theme or other plugins. If conflicts occur or further customization is needed, additional adjustments may be necessary. Please note that this script, CSS style, or plugin must be used AS IS.

Wp Scriptly

Newsletter signup

WpScriptly

Subscribe to my WpScriptly newsletter for WordPress tips, plugin tutorials, and exclusive updates—delivered straight to your inbox!

Comments: