L’extension « The Events Calendar » a des qualités mais pas celle de proposer un affichage flexible des prochains événements, par exemple pour une page d’accueil.

Il y a bien, à ce jour, un block pour l’éditeur WordPress, mais il ne permet qu’une liste minimaliste sans personnalisation.

Il faut ensuite faire un tour du coté d’extensions spécifiques pour se permettre des mises en forme plus évoluées, même si ici non plus la personnalisation n’est pas toujours à l’ordre du jour (The Events Calendar Shortcode & Block, Events Shortcodes Pro For The Events Calendar).

Ces extensions sont payantes, elles n’offrent pas de block personnalisable pour l’éditeur. Elles produisent un simple shortcode.

Tant qu’à utiliser un shortcode, autant le faire soit même. Il répondra exactement à notre besoin et le site ne sera pas pollué par une extension supplémentaire.

Et ce n’est finalement pas si compliqué que cela car The Events Calendar met à disposition une Class qui va permettre de récupérer directement les données que l’on souhaite sans devoir jongler avec les post-metas du type de contenu personnalisé créé par l’extension.

Le code ci-dessous va permettre, en insérant le shortcode [upcoming_events] dans votre page, d’afficher pour les 3 prochains événements mis en avant, la photo à la une, le titre, les dates, le nom du lieu, les catégories et bien sûr le lien vers l’événement.

La Class de l’extension The Events Calendar simplifie grandement la vie, pour générer la requête (tribe_get_events) mais également pour récupérer les données que l’on souhaite afficher (tribe_get_start_date pour la date de début avec passage du format de sortie désiré, tribe_get_venue_id pour récupérer les infos du lieu, etc.).

En mettant en place le bon balisage, adapté au thème si nécessaire, et avec le CSS qui va bien, nous arrivons au résultat recherché.

Code source de base pour créer le code court The Events Calendar

function upcoming_events_shortcode() {
    if( !class_exists('Tribe__Events__Query') ) {
        return 'Veuillez activer l’extension "The Events Calendar".';
    }
    // Obtenez les 3 prochains événements mis en avant
    $events = tribe_get_events( array(
        'posts_per_page' => 3,
        'start_date' => current_time( 'Y-m-d H:i:s' ),
        'meta_key' => '_tribe_featured', // Clé pour les événements mis en avant
        'meta_value' => '1' // Valeur pour les événements mis en avant
    ));
    if ( ! $events ) {
        return 'Il n’y a pas d’événements à venir.';
    }
    $output = '<div class="upcoming-events">';
    foreach ( $events as $event ) {
        $output .= '<div class="event">';
        if ( has_post_thumbnail( $event->ID ) ) {
            $output .= get_the_post_thumbnail( $event->ID, 'medium' );
        }
        $output .= '<h2><a href="' . get_permalink( $event->ID ) . '">' . get_the_title( $event->ID ) . '</a></h2>';
        // Dates de début et de fin
        $start_date = tribe_get_start_date( $event->ID, false, 'j F Y H:i' );
        $end_date = tribe_get_end_date( $event->ID, false, 'j F Y H:i' );
        $output .= '<p>Date de début : ' . $start_date . '</p>';
        $output .= '<p>Date de fin : ' . $end_date . '</p>';
        // Lieu de l'événement
        $venue_id = tribe_get_venue_id( $event->ID );
        if ( $venue_id ) {
            $venue_name = get_the_title( $venue_id );
            $output .= '<p>Lieu : ' . $venue_name . '</p>';
        }
        // Catégorie de l'événement
        $categories = get_the_terms( $event->ID, 'tribe_events_cat' );
        if ( $categories && ! is_wp_error( $categories ) ) {
            $category_names = array();
            foreach ( $categories as $category ) {
                $category_names[] = $category->name;
            }
            $output .= '<p>Catégorie : ' . join( ', ', $category_names ) . '</p>';
        }
        // Lien vers l'événement
        $output .= '<p><a href="' . get_permalink( $event->ID ) . '">Voir plus</a></p>';
        $output .= '</div>';
    }
    $output .= '</div>';
    return $output;
}
add_shortcode( 'upcoming_events', 'upcoming_events_shortcode' );

Ce code est à placer dans le fichier functions.php de votre thème enfant et à adapter en fonction de vos besoin (nombre d’événements, mis en avant ou non, données récupérées, mise en forme).