How to display upcoming events (WP_Query)

Hi there,

how do I display the closest three upcoming events in my template, using WP_Query?

Marcel

  • Predrag Dubajic
    • Support

    Hey Marcel,

    Hope you’re doing well today :slight_smile:

    Is there specific reason you are looking to do this using WP_Query?

    You can easily do it with the included shortcodes, simply add below shortcode to your page content and that should be it:

    [eab_archive limit="3"]

    Would this work for you?

    Best regards,

    Predrag

  • Marcel Schreyer
    • Flash Drive

    Is there specific reason you are looking to do this using WP_Query?

    Yes, I want to integrate the events list in my own template. I already have the query working, but I don´t know how to order events by “closest start date” (instead of “latest publishing date”:wink:.

    <?php

    $args1 = array(
    'eab_events_category' => 'webinar',
    'post_type' => 'incsub_event',
    'posts_per_page' => '3',
    'paged' => 0,
    'suppress_filters' => true
    );

    // Custom query.
    $query1 = new WP_Query( $args1 );

    // Check that we have query results.
    if ( $query1->have_posts() ) :

    // Start looping over the query results.
    while ($query1 -> have_posts()) :

    $query1 -> the_post();

    get_template_part( 'content', 'event' );

    endwhile;

    endif;

    // Restore original post data.
    wp_reset_postdata();

  • Adam Czajczyk
    • Support Gorilla

    Hello Marcel!

    I think this should do the job:

    <?php

    $current_date = current_time('mysql'); // current time in YYYY-MM-DD HH:MM:SS format
    $future_date = '2025-12-30 00:00:00'; // this should be any date in a distant future

    $args1 = array(
    'eab_events_category' => 'webinar',
    'post_type' => 'incsub_event',
    'posts_per_page' => '3',
    'paged' => 0,
    'suppress_filters' => true,
    'meta_key' => 'incsub_event_start',
    'orderby' => 'meta_value',
    'meta_query' => array(
    array(
    'key' => 'incsub_event_start',
    'value' => array($current_date,$future_date),
    'compare' => 'IN',
    ),
    ),
    );

    // Custom query.
    $query1 = new WP_Query( $args1 );

    // Check that we have query results.
    if ( $query1->have_posts() ) :

    // Start looping over the query results.
    while ($query1 -> have_posts()) :

    $query1 -> the_post();

    get_template_part( 'content', 'event' );

    endwhile;

    endif;

    // Restore original post data.
    wp_reset_postdata();

    Give it a try please and let me know if it helped :slight_smile:

    Best regards,

    Adam

  • Marcel Schreyer
    • Flash Drive

    After some additional editing it works:

    $current_date = current_time('mysql'); // current time in YYYY-MM-DD HH:MM:SS format

    $args1 = array(
    'eab_events_category' => 'webinar',
    'post_type' => 'incsub_event',
    'posts_per_page' => '3',
    'paged' => 0,
    'suppress_filters' => true,
    'meta_key' => 'incsub_event_start',
    'orderby' => 'meta_value',
    'order' => 'asc',
    'meta_query' => array(
    array(
    'key' => 'incsub_event_start',
    'value' => $current_date,
    'compare' => '>',
    ),
    ),
    );

    // ...

    Thank you very much!

  • Marcel Schreyer
    • Flash Drive

    Hey,

    I have another issue with this topic: After implementing the solution like shown above events are sorted correctly… well, nearly. One of the events steps out of the line, as you can see on the screenshot. I don´t have the slightest clue why this happens. The sorting also doesn´t match to the publishing dates, I´ve checked that. Do you have an idea? (Support access is granted)

  • Milan
    • WordPress Wizard

    Hello Marcel Schreyer

    Hope you are well today and wont’ mind me chiming here. :slight_smile:

    Now your this issue seems related to markup you are rendering with Events+. First let me clarify what I understood from your above question is that, one of event ( as in screenshot, last one ) steps out from the line ( means render at the last position of row where it should be rendered at first. ) Right ?

    Please advise further if I am missing something here.

    Cheers,

    Milan

  • Marcel Schreyer
    • Flash Drive

    The events should be sorted ascending “event start date”. But one event isn´t located at the right position. In the sceenshot it´s the “July 28th”, which is displayed after “July 14th” instead of correctly being displayed after “July 26th” at the end of line 2. All the other events are in right order.

    It´s about this page: http://dev.ibsolution-veranstaltungen.de/events/

    As you can see, in the meantime the order of the events on the page changed (compared to the screenshot), but it´s again only one event which doesn´t fit into the order. The “July 19th” is displayed after “July 26th” instead of after “July 14th”.

  • Predrag Dubajic
    • Support

    Hi Marcel,

    This looks like the issue within the theme itself, there a script reordering the events on your page, I'm guessing because of that second event having shorter description so it fills up that space with the first event from second row.

    If you look at the page HTML from inspector you will actually see that they are properly sorted there, and while the page is loading you will see they are in correct order before the script reorders them.

    Also, if you disable JS on that page completely it will show them like this:

    You should check with the theme or plugin devs how this scripts works and what would be best workaround for it.

    Best regards,

    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.