Create a List or Table of Upcoming Events with The Events Calendar WordPress Plugin
If you display upcoming events on your WordPress website, there’s a good chance that you’re using The Events Calendar or Events Calendar Pro plugins. These are probably the most popular WordPress event plugins. You can use them to display basic events, or combine them with other plugins by the same company to take bookings online.
The Events Calendar provides a choice of views for your events. You can list events as a basic list or on a calendar. Events Calendar Pro also has extra views such as map view.
But what happens if you have loads of events and want to display them in a more compact format? The default views use a lot of space and are no use for listing events as a more comprehensive directory or database of events. One option is to create a custom template or customise one of the default views. However this requires coding expertise and isn’t realistic for everyone.
In this post, I’ll teach you how to use the Posts Table Pro plugin to display your events in an interactive list or table. You’ll still benefit from all the other event-related features provided by Events Calendar Pro. However Posts Table Pro lets you list your Events Calendar events in a different format.
(Please note that this only works for events added using the Events Calendar or Events Calendar Pro WordPress plugins – not other plugins like Event Espresso or Events Manager. See below for tips on creating a table using other events plugins.)
Why display events in a table?
The default event views provided by the Events Calendar are more than enough for most websites. However sites with large numbers of events may want to display their events in a more tabular, grid-based format.
The benefit of listing events in a table is that people can view large numbers of events on the same screen. They can sort to find the type of event they’re looking for by clicking on a column header or category. They can type a keyword in the search box to perform a search. None of this is possible using the default Events Calendar views.
Once a user has found the event they’re interested in, the table lets them click through to the single event page provided by the Events Calendar. This lets them view more information, book an event (depending on your add-ons) and everything you’d expect from an events site.
I don’t already have The Events Calendar – how do I set it up?
This tutorial is aimed at people who are already using The Events Calendar plugin (free or pro) and want to display events in a list or table.
The online course contains 36 lectures and over 3.5 hours of video tutorials. I walk you through the process of setting up a professional events website step-by-step.
The e-book is available on Kindle and provides a more basic introduction to setting up The Events Calendar. It works as a standalone training book and is ideal as a written companion to the online course.
If you already have an events website using The Events Calendar then it’s worth using the online course or e-book to make sure you’re getting the most out of these plugins.
How to display WordPress events in a table
Once you’ve got all your events set up, it’s time to list them in a table.
You’ll need the Posts Table Pro plugin for this, which you can buy here. Follow the instructions to install Posts Table Pro, then return to this article.
You can display your table of events on any page on your website. If you want to create multiple tables (e.g. one for each of your event categories), that’s fine too. You might use Posts Table Pro to provide an events database on top of the views provided by the Events Calendar plugin, or you might use it to replace those default views. Spend some time thinking about the best structure for your website as it’s pretty flexible.
1. Create a table listing all your upcoming events
Go to the page where you want to list your events. To create the table, add the following shortcode: [posts_table post_type="tribe_events"]
This will display a table listing all your upcoming events using the default options and column headers. If that’s exactly how you want it, great! But it includes columns such as author which aren’t relevant to events, and the category column is empty because it’s looking for standard post categories rather than event categories. So keep reading and I’ll show you how to configure the shortcode for an events site.
2. Choose your columns
The next step is to tell the shortcode which columns you want to display in the table. To do this, you need to add columns=”” to the shortcode. To do this, you need to know the correct syntax to put between the quotation marks.
The Events Calendar plugins store various data about your events. This list gives you the correct syntax to display the data as columns in your events table.
- Event name – title – e.g. [posts_table post_type="tribe_events" columns="title"]
- Event description – content – e.g. [posts_table post_type="tribe_events" columns="content"]
- Event category – tax:tribe_events_cat – e.g. [posts_table post_type="tribe_events" columns="tax:tribe_events_cat"]
- Start date – cf:_EventStartDate – e.g. [posts_table post_type="tribe_events" columns="cf:_EventStartDate"]
- End date – cf:_EventEndDate – e.g. [posts_table post_type="tribe_events" columns="cf:_EventEndDate"]
- Website – cf:_EventURL – e.g. [posts_table post_type="tribe_events" columns="cf:_EventURL"]
- Event price – cf:_EventCost – e.g. [posts_table post_type="tribe_events" columns="cf:_EventCost"] (note: this is the event cost if you’re not using a ticketing plugin)
The above shortcodes will create a table with just 1 column. Combine them to create an events list with multiple columns.
For example, [posts_table post_type="tribe_events" columns="title,content,cf:_EventStartDate,tax:tribe_events_cat"] displays columns for title, content, start date and event category.
As you can see, it looks much better with the correct columns:
3. Rename your columns
By default, the Events Calendar plugin terminology will be used for your column headers – e.g. EventStartDate. This isn’t very user-friendly so it’s best to rename these.
To set a custom column heading, you need to add a : (colon) after the column name. You can do this for as many columns as you like.
In this example, I have renamed the content, start date and event category columns while leaving the default column heading for title:
[posts_table post_type="tribe_events" columns="title,content:Event Overview,cf:_EventStartDate:Date,tax:tribe_events_cat:Category"]
As you can see, our table of events is looking pretty good now. Our events are listed in a nice logical format with useful, self-explanatory column headers. Users can click on a column header to sort by that column. They can click on a category name to filter by that category. They can type a keyword in the search box.
4. Extra configuration options
By now, your events table should be nearly there. If you’d like more fine-grained control over how it works, you can use the Posts Table Pro Documentation to continue configuring your shortcode. There are plenty more options including:
- List events from specific categories only (do this using the ‘term‘ option)
- Choose which column the table is sorted by (e.g. event state date)
- Choose how many rows will appear per page
- Set the length of the event description
Creating tables using other events plugins
The above instructions explain how to create a table of upcoming events using The Events Calendar plugins by Modern Tribe. If you’re using a different plugin such as Event Espresso or Events Manager, you can still use Posts Table Pro to display events in a table. However the syntax for the shortcode will be different.
You’ll need to send a support request to the events plugin author to ask the correct terminology. To help you with this, here’s some wording to send them:
“Hi, I’m using the Posts Table Pro plugin to display a list of upcoming events on my website. I need some information about the data that your plugin stores for my events so that I can display it in the table. Please could you tell me:
– The slug of the custom post type used for the events
– The slug for the following pieces of data and whether each one is a custom field/metafield or taxonomy (now add a list of all the columns you want to display in the table – e.g. event date, date, category, price)
Thank you very much”
Armed with this information about your chosen events plugin, you can use the instructions in this article to set up your shortcode.
What theme is used on the video and screenshots for this post?
If you like the design of the website used in the video tutorial and screenshots, you can easily get this on your own website. Our test site uses the Avada theme. This is the bestselling WordPress theme of all time so it’s worth checking it out if you want to design your own site.
Over to you – How do you display events on your website?
Now it’s your turn! If you have large numbers of events on your own website, I’d love to know how you display them. Do you use Posts Table Pro or have you created a custom template for your events listings? Please leave your comments below.