Shortcode - WpScriptly

Countdown Timer Redirect Plugin for WordPress

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

These scripts, CSS styles, and plugins are designed to work best with minimal interference from themes or other plugins. If conflicts arise, adjustments may be needed.
Please note that they must be used as is.”

Let me know if you’d like any further refinements!

Wp Scriptly

Was this information helpful?

Comments: