Reply To: 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