Have Wordpress Read a Shortcode String and Parse a Variable to Javascript

Question

I have a countdown timer on my Wordpress site. For reference I used this tutorial . I call/include the .js from a child theme via the footer of my site.

Currently the tutorial has me inserting the countdown timer via <span id="countdown"></span> .

I would like to insert the countdown timer instead, with a shortcode, that contains a variable to be parsed into the .js to set the target date.

Here is the relevant line of code from the js file, with the static/hard coded date. This is where I want to forward my variable to.

var target_date = new Date("Aug 15, 2019").getTime();

This way I can use a single .js include to create multiple countdown timers.

Eg Shortcode: [Countdown Timer target="Aug 15, 2019"]

How do I get Wordpress to recognise the shortcode, load the span id and parse the variable to set the target date/time?

Note: I don't mind installing a plugin if there is complexity having the shortcode work. My main requirement is to be able to parse a variable, so if it can be done some other way I'd be happy to look into that.

Answer 1

This solution will allow for a single timer per page. I know you said you may possibly need more than one, but if not, this will work.

Include this JS somewhere in your site. Notice I have have it inside of .ready , please make sure it stays that way. I also deleted a single line from your example, which will be set with the shortcode.

<script type="text/javascript">
    jQuery( document ).ready(function() {

        var days, hours, minutes, seconds;

        var countdown = document.getElementById("countdown");

        setInterval(function () {

            var current_date = new Date().getTime();
            var seconds_left = (target_date - current_date) / 1000;

            days = parseInt(seconds_left / 86400);
            seconds_left = seconds_left % 86400;

            hours = parseInt(seconds_left / 3600);
            seconds_left = seconds_left % 3600;

            minutes = parseInt(seconds_left / 60);
            seconds = parseInt(seconds_left % 60);

            countdown.innerHTML = days + "d, " + hours + "h, "
            + minutes + "m, " + seconds + "s";  

        }, 1000);
    });     
</script>

Then include this PHP in your theme's functions.php file.

function aw_countdown_timer ($atts) {
    extract(shortcode_atts(array(
        'target_date' => '',
    ), $atts, 'aw_countdownTimer' ));
    echo '<script>var target_date = new Date("' . $target_date . '").getTime();</script>';
    echo '<span id="countdown"></span>';
}
add_shortcode( 'aw_countdownTimer', 'aw_countdown_timer' );

Then you can use this shortcode [aw_countdownTimer target_date="Feb 14, 2014"] in any page. Just change the Feb 14, 2014 to your desired date, but make sure to use that exact format.