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.
Opens WPIDE on
Code
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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.