Count up function

Hey calebcuster,
Unfortunately the Animated Countdown element datepicker will not allow you to choose a past date so this will not work, the post that you linked to was from 2015.
Instead try this shortcode count up clone, add this code to the end of your child theme functions.php file in Appearance ▸ Editor or if you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

then add this code and save.

function wp_custom_countup_shortcode($atts) {
    // Extract shortcode attributes
    $a = shortcode_atts(array(
        'date' => '2020-01-01', // Default date
        'color' => 'black', // Default font color
        'background' => 'white', // Default background color
        'offset' => '0', // Default timezone offset in hours
    ), $atts);

    $uid = uniqid('countup_');

    // Enqueue jQuery if it's not already included
    wp_enqueue_script('jquery');

    // Output HTML
    $html = "<div id='{$uid}'  class='av-countdown-timer-inner'>
                <span class='av-countdown-cell av-align-center'><span class='av-countdown-cell-inner' style='color: {$a['color']}; background-color: {$a['background']};'><span class='av-countdown-time weeks'></span><span class='av-countdown-time-label'>Weeks</span></span></span>
<span class='av-countdown-cell av-align-center'><span class='av-countdown-cell-inner' style='color: {$a['color']}; background-color: {$a['background']};'><span class='av-countdown-time days'></span><span class='av-countdown-time-label'>Days</span></span></span>
<span class='av-countdown-cell av-align-center'><span class='av-countdown-cell-inner' style='color: {$a['color']}; background-color: {$a['background']};'><span class='av-countdown-time hours'></span><span class='av-countdown-time-label'>Hours</span></span></span>
<span class='av-countdown-cell av-align-center'><span class='av-countdown-cell-inner' style='color: {$a['color']}; background-color: {$a['background']};'><span class='av-countdown-time minutes'></span><span class='av-countdown-time-label'>Minutes</span></span></span>
<span class='av-countdown-cell av-align-center'><span class='av-countdown-cell-inner' style='color: {$a['color']}; background-color: {$a['background']};'><span class='av-countdown-time seconds'></span><span class='av-countdown-time-label'>Seconds</span></span></span>
             </div>";

    // Adjust the current time for the timezone offset
    $offsetMilliseconds = $a['offset'] * 3600 * 1000; // Convert hours to milliseconds

    // JavaScript to update the countdown
    $html .= "<script>
                jQuery(function($) {
                    var countUpDate = new Date('{$a['date']}').getTime();
                    var x = setInterval(function() {
                        var now = new Date().getTime() + {$offsetMilliseconds}; // Adjust for timezone offset
                        var distance = now - countUpDate;
                        var weeks = Math.floor(distance / (1000 * 60 * 60 * 24 * 7));
                        var days = Math.floor((distance % (1000 * 60 * 60 * 24 * 7)) / (1000 * 60 * 60 * 24));
                        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                        
                        $('#{$uid} .weeks').text(weeks);
                        $('#{$uid} .days').text(days);
                        $('#{$uid} .hours').text(hours);
                        $('#{$uid} .minutes').text(minutes);
                        $('#{$uid} .seconds').text(seconds);
                    }, 1000);
                });
              </script>";

    return $html;
}
add_shortcode('custom_countup', 'wp_custom_countup_shortcode');

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Then use this shortcode on the page to display:
[custom_countup date="2024-03-10" color="#fff" background="#000" offset="-4"]
the first attribute is the date in the past, then the font color, then the cell background color, and then the time offset, this is the difference between your server time and the time you want to use, since our servers are not always in the same timezones as we are. The default is zero if you don’t add this attribute.
This is the result:

This uses the same classes as the countdown element so the style is pretty close, here is what the two together look like:

Best regards,
Mike

Hi,
Thanks Guenni007 and good point, hopefully this will be useful for many people :)

Best regards,
Mike

Hi,
Glad to hear that you find this helpful, thanks to Guenni007 for pointing out that the needed css may not always be loaded correctly, so I added the css into the shortcode and I changed the date attribute to include a time so you can better choose a start date & time. I also added a format attribute so you can choose what will show, like the “Smallest time unit” and “Largest time unit”
So the shortcode to use on the page is now like this: [custom_countup date=”2024-03-01 00:00:00″ format=”weeks,days,hours,minutes,seconds” color=”#000″ background=”#f8f8f8″] you can remove the time units that you don’t want to show.

But please note that if you only show hours & days, the day element will only show up to 7 days even if you have the week element hidden, so you will not see “13” days, the same is for the calculation on all of the elements. This is the new code:

function wp_custom_countup_shortcode($atts) {
    $a = shortcode_atts(array(
        'date' => '2020-01-01 00:00:00',
        'color' => 'black',
        'background' => 'white',
        'format' => 'weeks,days,hours,minutes,seconds', 
    ), $atts);

    $uid = uniqid('countup_');
    wp_enqueue_script('jquery');

    $formatParts = array_map('trim', explode(',', $a['format']));
    $htmlParts = array();

    foreach ($formatParts as $part) {
        if (in_array($part, ['weeks', 'days', 'hours', 'minutes', 'seconds'])) {
            $htmlParts[] = "<span class='av-countdown-cell av-align-center' style='color: {$a['color']};'><span class='av-countdown-cell-inner' style='background-color: {$a['background']};'><span class='av-countdown-time {$part}'></span><span class='av-countdown-time-label'>" . ucfirst($part) . "</span></span></span>";
        }
    }

    $html = "<div id='{$uid}' class='av-countdown-timer-inner'>" . implode("\n", $htmlParts) . "</div>";

    $serverTimeAtPageLoad = current_time('timestamp', true) * 1000;

    $jsParts = [];
    foreach ($formatParts as $part) {
        $jsParts[] = "'{$part}': Math.floor(" . ($part == 'weeks' ? "distance / (1000 * 60 * 60 * 24 * 7)" : ($part == 'days' ? "(distance % (1000 * 60 * 60 * 24 * 7)) / (1000 * 60 * 60 * 24)" : ($part == 'hours' ? "(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)" : ($part == 'minutes' ? "(distance % (1000 * 60 * 60)) / (1000 * 60)" : "(distance % (1000 * 60)) / 1000")))) . ")";
    }

    $html .= "<script>
                jQuery(function($) {
    var countUpDate = new Date('{$a['date']}').getTime();
    var serverTimeAtPageLoad = {$serverTimeAtPageLoad};
    var x = setInterval(function() {
        var now = new Date().getTime();
        var elapsedTime = now - serverTimeAtPageLoad;
        var serverNow = serverTimeAtPageLoad + elapsedTime;
        var distance = serverNow - countUpDate;

        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        var weeks = Math.floor(days / 7);
        days -= weeks * 7; 

        var timeParts = {
            'weeks': weeks,
            'days': days,
            'hours': hours,
            'minutes': minutes,
            'seconds': seconds
        };

        Object.keys(timeParts).forEach(function(key) {
            $('#{$uid} .' + key).text(timeParts[key]);
        });
    }, 1000);
});
</script>";

    $html .= "<style>
    .av-countdown-timer-inner { display: table; width: 100%; table-layout: fixed; }
    .av-countdown-cell { display: table-cell; }
    body .av-align-center { text-align: center; }
    .av-countdown-cell-inner { display: block; vertical-align: baseline; border-style: solid; border-width: 1px; margin: 2px; padding: 20px; }
    .av-countdown-time { display: block; font-size: 40px; line-height: 1em; font-weight: 100; text-decoration: none; }
    .av-countdown-time-label { display: block; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; line-height: 1.65em; }
    @media only screen and (max-width: 767px) {
        .responsive .av-countdown-cell-inner { padding: 12px 7px; }
        .responsive .av-countdown-time { font-size: 30px; }
        .av-countdown-time-label { text-transform: none; }
    }
    @media only screen and (max-width: 989px) {
        .responsive .av-countdown-cell-inner { padding: 10px 10px; }
    }
    </style>";

    return $html;
}
add_shortcode('custom_countup', 'wp_custom_countup_shortcode');

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike