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.

E.g. 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.

Quite likely, so I suppose I had better account for that. Will that mean a second variable? — square_eyes
– square_eyes, Commented Feb 7, 2014 at 16:36
I just whipped up a solution that works for a single timer per page. Unfortunately I'm having issues getting multiple timers per page to work. — AndyWarren
– AndyWarren, Commented Feb 7, 2014 at 16:37

AndyWarren · Accepted Answer · 2014-02-07 17:39:29Z

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.

edited Feb 7, 2014 at 17:39

answered Feb 7, 2014 at 16:53

AndyWarren

2,0121 gold badge22 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

square_eyes Over a year ago

Not quite working for me yet. I added functions.php to my child theme and included your code (within PHP tags). When I load the page and view source I see

<div class="entry-summary"> 						<script>var target_date = new Date("Feb 14, 2014").getTime();</script><span id="countdown"></span> <br/> 		</div>

. Am I missing something? Also why do we define two shortcode types?

AndyWarren Over a year ago

I'm not sure what you mean by "two shortcode types". There is only one shortcode there. If you're referring to add_shortcode( 'aw_countdownTimer', 'aw_countdown_timer' ); then aw_countdownTimer is the name of the shortcode and aw_countdown_timer is the function that the shortcode executes.

AndyWarren Over a year ago

Did you do exactly what my answer said to do with the JS? That is a must for this to work.

AndyWarren Over a year ago

Also, I just removed a <br/> from the PHP, it was only there for my testing and I initially forgot to remove it.

square_eyes Over a year ago

Yes I simply replaced my .js with yours. It's still being included via the footer on my site. Maybe it's happening in the wrong order... should it be in the header? (Regarding my other question... I figured that out thanks)

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related