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.
- First create a form and go in the settings & Integrations -> Confirmation Settings
- Change confirmation type to a page.
- Create and Select the thank you page you created.
- Next in the thank you page place the shortcode at the bottom of the page.
- 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/"]
Was this information helpful?
Comments: