# Countdown to the Next Event (The Events Calendar)

> Adds a [wpide_next_event_countdown] shortcode that shows the next upcoming event with a live days-hours-minutes countdown to its start.

- Type: PHP
- Runs: Run everywhere
- Category: [Plugin Integrations](https://wpide.com/library/category/integrations/)
- Tags: events-calendar, countdown, shortcode
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/tec-next-event-countdown/

## Code

```php
add_shortcode( 'wpide_next_event_countdown', function ( $atts ) {
    if ( ! function_exists( 'tribe_get_events' ) ) {
        return '';
    }

    $atts = shortcode_atts( array( 'category' => '' ), $atts, 'wpide_next_event_countdown' );
    $args = array( 'posts_per_page' => 1, 'start_date' => 'now' );

    if ( '' !== $atts['category'] ) {
        $args['tax_query'] = array( array( 'taxonomy' => 'tribe_events_cat', 'field' => 'slug', 'terms' => sanitize_title( $atts['category'] ) ) ); // phpcs:ignore WordPress.DB.SlowDBQuery
    }

    $events = tribe_get_events( $args );

    if ( ! $events ) {
        return '';
    }

    $event = $events[0];
    $utc   = get_post_meta( $event->ID, '_EventStartDateUTC', true );
    $start = $utc ? strtotime( $utc . ' UTC' ) : strtotime( (string) get_post_meta( $event->ID, '_EventStartDate', true ) );

    if ( ! $start || $start <= time() ) {
        return '';
    }

    $id = wp_unique_id( 'wpide-countdown-' );

    ob_start();
    ?>
<div class="wpide-event-countdown" id="<?php echo esc_attr( $id ); ?>" data-start="<?php echo (int) $start; ?>">
    <a href="<?php echo esc_url( get_permalink( $event ) ); ?>"><?php echo esc_html( get_the_title( $event ) ); ?></a>
    <p aria-live="off"><span data-part="d">0</span> days, <span data-part="h">0</span> hours, <span data-part="m">0</span> minutes</p>
</div>
<script>
(function () {
    var el = document.getElementById(<?php echo wp_json_encode( $id ); ?>);
    if (!el) { return; }
    var start = parseInt(el.getAttribute('data-start'), 10) * 1000;
    function tick() {
        var left = Math.max(0, start - Date.now());
        el.querySelector('[data-part="d"]').textContent = Math.floor(left / 864e5);
        el.querySelector('[data-part="h"]').textContent = Math.floor(left % 864e5 / 36e5);
        el.querySelector('[data-part="m"]').textContent = Math.floor(left % 36e5 / 6e4);
    }
    tick();
    setInterval(tick, 60000);
})();
</script>
    <?php
    return ob_get_clean();
} );
```

## Notes

Add category="slug" to count down to the next event in one category. The countdown updates once a minute and needs no external library.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Countdown to the Next Event (The Events Calendar)" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/