Create an Events Table or List of Upcoming Events with The Events Calendar WordPress Plugin
This tutorial will teach you how to create a searchable WordPress events table listing your upcoming events.
If you display upcoming events on your WordPress website, there’s a good chance 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.
The easy way to list events in a table view
In this tutorial, I’ll teach you how to use the Posts Table Pro plugin to display 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.
(Note: I’ve focussed on 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 the events table 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 from the events table 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 create a WordPress events table or list.
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. Or if you’re still choosing an events plugin for your website, check out our article on 2 ways to take course and event bookings with WooCommerce.
But I’d rather use a WordPress developer to build my website
If you’d rather not develop your own website, then there are many WordPress web design agencies who can help you. It’s often hard to find the right person, so a good option is to post a job on Codeable.
Codeable is a marketplace owned by the company behind wordpress.org. It has many experienced WordPress developers, all of which are pre-approved by Codeable to ensure the high quality of their work. When you post a job on Codeable, it will be seen by people with experience of The Events Calendar plugin. After you receive quotes, you can check each person’s reviews to choose the right person.
Most WordPress agencies will only build complete websites. If you want to build most of your website yourself and pay someone to do some specific tasks, then Codeable is a good way to find someone willing to do this.
How to list 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 add your events table 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 in a table. To create the table, add the following shortcode:
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.
[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 knowledge base to continue configuring your shortcode. There are plenty more options including:
- List events from specific categories only
- Choose which column the table is sorted by (e.g. event start date)
- Change the Date Format
- Choose how many rows will appear per page
- Set the length of the event description
- Add event filter dropdowns above the table. You can add filters for categories, tags or custom taxonomies, so there are lots of ways to filter the table
Note: Due to the way The Events Calendar plugin works, it’s not possible to display event organisers or venues in the table. This is because venues and organisers are saved as a separate custom post type and aren’t part of each event. To display venues or organisers in your table of events, I recommend adding them as custom taxonomies instead. You can then display these as columns in the table.
Can I include ‘Buy’ buttons in the table of events?
The Events Calendar plugin has 2 sister plugins which let you extend it to take bookings for events. The Event Tickets and Event Tickets Plus add-ons work together to allow people to buy tickets for your events using WooCommerce, and pay online. WooCommerce is the no. 1 e-commerce plugin and provides the e-commerce features such as the cart, checkout and payment gateways.
Used together, these plugins create ‘tickets’ for each event, which people can buy in order to book a place. Each ticket is linked to the Events Calendar event, and is basically a WooCommerce product.
The difficulty in including ‘Buy’ to ‘Add to Cart’ buttons in your events table is that the table lists events, but you don’t buy an event – you buy a ticket! The two are linked behind the scenes, but not in a way that lets you display add to cart buttons in the table of events. Here are two workarounds to get around this:
Option 1 – List tickets using WooCommerce Product Table instead
If you want to include add to cart buttons in the table, then the only option is to use our WooCommerce Product Table plugin instead of Posts Table Pro. The two plugins are very similar, but the dedicated WooCommerce version supports more WooCommerce features such as add to cart buttons.
Instead of using our Posts Table Pro plugin to list events in a table (as described in the rest of this tutorial), you would do something similar using WooCommerce Product Table to create a table of event tickets. This can include add to cart buttons, as you can see in the screenshot:
The tickets can be listed in the table with the product name, price and add to cart button. However, the table won’t display other fields from the event such as the event date. To get around this, you can add the date to the ticket name when you create the ticket. You can see this in action in the screenshot above.
Option 2 – Workaround for showing Buy buttons using Posts Table Pro
If you really want to use Posts Table Pro to list events, instead of switching to WooCommerce Product Table, then there is a workaround.
Because your events can’t be purchased directly in The Events Calendar – you need tickets for this – there’s no way to dynamically list ‘Add to cart’ buttons in the events table. However, you can achieve this with a bit of extra work.
You can add Buy buttons to the table of events by manually adding these directly to your events. You would still use the Event Tickets Plus extension to create your tickets, but you would need to create a custom field to add the Buy button directly to each event.
How to do it
- Set up your WordPress events website with The Events Calendar, Event Tickets, Events Tickets Plus and WooCommerce (as described above). Add some events with tickets.
- Use the Advanced Custom Fields plugin to create custom fields for any fields from your tickets that you want to include in the table. For example, you might need custom fields for event price and add to cart button.
- Go to the Events section in the WordPress admin, edit each event, and add data to the custom fields you just created. Adding the price is self-explanatory. You can use the WooCommerce add to cart shortcode to insert ‘Add to Cart’ buttons for the ticket that corresponds to each event. (To learn how to do this, go to docs.woocommerce.com/document/woocommerce-shortcodes and go to the ‘Add to Cart’ section.)
- Now, you can create a table of events which includes these extra fields. Here’s an example shortcode to get you started. It assumes that your custom fields are called ‘price’ and ‘add to cart’:
[posts_table post_type="tribe_events" columns="title,cf:_EventStartDate:Date,tax:tribe_events_cat:Category,cf:price,cf:add-to-cart"]
It’s frustrating how disjoined events and tickets are, but that’s just how The Events Calendar works. I hope these suggestions help you to work around it.
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.
What else can I use the Posts Table Pro plugin for?
Once you’ve listed your events in a table, you don’t have to stop there! You can use the WordPress table plugin to display all sorts of content in many different ways. If you have audio or video on your site, maybe use it to create a WordPress video gallery or audio library. You can use it as a WordPress document library plugin listing your publications in a knowledge hub. You can even display tables of members in a member directory with profiles.
And if you like the table plugin, why not earn 30% commission for recommending it under our WordPress plugin affiliate scheme?
Over to you – Do you have an events table 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 an events table? Please leave your comments below.