How to Use WP_Query to Display Future Events in WordPress Theme

Coding WP_Query

In this post I show shortly how to use WP_Query to display future events in your WordPress theme. The events in my case are custom post type but this same idea can be used to all post types e.g. for a normal posts, which are scheduled to be published in the future. Detailed information about WP_Queries with punch of examples can be found WordPress WP_Query Codex page.

The reason why I wanted to display future events in my WordPress theme was that I needed a list of the upcoming events on the sidebar of the page. This example doesn’t show how to get the listing to the sidebar, but it creates the listing to the normal page.

Pre-requisites for to take these instructions in use

  • Development environment up and running
  • WordPress installed
  • Basic WordPress theme structure coded
  • A test page created from admin
  • page-<your-page-name>.php file created
  • Events (your custom post type) or posts scheduled from admin

The Code and View

The WordPress theme was built for eRacing team and the events are about upcoming practises, races or qualifications. The code is placed in page-test.php file and it creates listing of upcoming events.

<?php 
     // 1. Get the content of the page 
     if (have_posts()){
         while(have_posts()){ 
             the_post(); the_content();
         }
      }
                            
      // 2. Define WP_Query
      $futureEvents = new WP_Query(array(
          'posts_count' => 5,
          'post_type'   => 'events',
          'post_status' => 'future'
                            
      ));
                      
      // 3. Get the events according to WP_Query
      if ($futureEvents->have_posts()){
          while($futureEvents->have_posts()) {
              $futureEvents->the_post();

              echo "<h5><a href='" . get_permalink() . "'>";
              the_date(); echo " : &nbsp"; the_title();
              echo "</a></h5>";
          }
       }         
?>
List of upcoming events created by WP_Query.
The list of upcoming events.
  1. Get the content of the page
    • If you have write a content to the test page via admin console, then you need this loop for fetching the content to the page.
  2. Define WP_Query
    • WP_Query is the beef of the code!
    • post_count sets the number of how many posts are fetched.
    • post_type defines the type of the post which you want to show on your page, if you need the normal posts just use post instead of events or if you have your own custom post type use that.
    • post_status has to be set to future
  3. Get the events according to WP_Query
    • loop for fetching posts according to predefined WP_Query
    • the_date() prints the scheduled date of the event
    • the_title() prints the title of the event
    • the date and the title is wrapped in a tag so that you can click the title and the single event page opens.

NOTE!! WP_Query checks the post_status date from the scheduled date. If your event will be arranged on a different date than you have scheduled the event from admin console to be published, then you have to implement list of upcoming events differently e.g. with help of Advanced Custom Fields.

The Order of Events

As you may noticed the order of listing is descending which is default value. Descending means that order is presented from the highest to lowest values. The order can be changed in several ways and WordPress WP_Query Codex page has good examples of it. Here is one solution.

// 2. Define WP_Query
$futureEvents = new WP_Query(array(
    'posts_count' => 5,
    'post_type'   => 'events',
    'post_status' => 'future',
    'orderby' => 'date',
    'order'   => 'ASC'
));

Orderby is checked from the event’s scheduled date and the order is defined to be ascending (ASC) which means that it’s from the lowest to highest values.

List of upcoming events created by WP_Query.
The list of upcoming events in ascending order.

Leave a Reply

Your email address will not be published. Required fields are marked *