Create a List of Upcoming Events with The WordPress Events Calendar Plugin
WordPress calendar plugins such as The Events Calendar are fantastic, but what if you’re not happy with the built-in event layouts? This tutorial will show you a straightforward way of creating a searchable events table to list your upcoming events.
It focusses on the suite of Events Calendar plugins by Modern Tribe (which includes Events Calendar Pro, Event Tickets Plus, etc.).
However, you can use the same method to create a table of events for any WordPress events plugin.
Watch the video to learn how, or keep reading for full written instructions on how to create a table of events. 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 limitations of default event layouts
If you display upcoming events on your WordPress website, there’s a good chance you’re already using The Events Calendar or Events Calendar Pro plugins, which are probably the most popular WordPress event plugins available. 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? What if you need extra search options and filters? The default views use a lot of space and can’t list events in 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.
Listing events in a table view is the perfect solution. I’ll tell you how to do this next.
The easy way to list events in a table view
In this tutorial, learn 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 an even more comprehensive format.
(Note: I’ve focussed on events added using the Events Calendar plugin 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. But 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. It’s a useful alternative to plugins that list events in a calendar or date-based layout.
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 plugin. This lets them view more information, book an event (depending on your add-ons) and everything you’d expect from an events site.
Case study #1 – Cooking events calendar plugin on The Kitchen
The Kitchen at Middleground Farms hosts cooking events in Oregon, USA. Each event is added to WordPress with the Events Calendar plugin. As the default layouts available weren’t quite right for the site, they decided to combine the WordPress events plugins with Posts Table Pro. Customers can now quickly find an event and book themselves on it using the interactive table.
The Kitchen’s list of events includes a short description, prices and dates. Users can sort the list by date, price or course name, or use the search function. Clicking on a course name takes customers to a new page (provided by Events Calendar and Event Tickets Plus), where they can book and make their payment.
Case study #2 – Listing training courses for AgileSparks
AgileSparks are a technology training company. They followed the steps in this tutorial to list training courses using Posts Table Pro with Events Calendar, WooCommerce and Event Tickets Plus.
It’s easy to find a course using the instant AJAX search box and the multiple filters above the table. You can then click through to learn more about each course and make a booking.
AgileSparks were delighted with the result:
Read on to find out how you can add a list of events to your own WordPress site.
I don’t already have The WordPress Calendar Plugin, 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.
If you haven’t already set up your events website, check out my online course or e-book about how to create a WordPress events website.
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 WordPress event plugin 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 WordPress event 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. You might even want to create multiple tables (e.g. one for each of your event categories), or use Posts Table Pro to provide an events database on top of viewing options already provided by the WordPress Events Calendar plugin. You might even want to 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. Just 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"]
- 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 – you need to use the ‘term’ option because categories in the Events Calendar plugin are actually custom taxonomies. For example, if your category slug is ‘excel-courses’ then you need to add
term="tribe_events_cat:excel-courses"to your Posts Table Pro shortcode (e.g.
[posts_table term="tribe_events_cat:excel-courses"]. This will create a WordPress table listing all events from the Excel Courses category.
- 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 organizers or venues in the table. This is because venues and organizers are saved as a separate custom post type and aren’t part of each event. To display venues or organizers 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 ‘Book’ or ‘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. You can also include the number of available places by adding a ‘stock’ column to the table. 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.
Note: The Events Tickets Plus plugin sets ticket products to ‘hidden’ by default. This will also hide them from the product table. If you want to list tickets directly in the product table, then you must go to the ‘Edit Product’ screen for the ticket and change the visibility so that it appears in the table. You’ll find the visibility option in the ‘Publish’ section at the top right of the page.
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 WP admin, edit each event, and add data to the custom fields you just created. Adding the price is self-explanatory. There are 2 options for adding the ‘Book Now’ or ‘Add to Cart’ buttons:
- 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.)
- Alternatively, you can add the ‘add to cart’ link URL for the ticket associated with the event. Again, you need to do this manually for each event. You need to enter the add to link for the corresponding ticket in this format: https://yourdomain.com/cart/?add-to-cart=ID. Replace https://yourdomain.com with the correct domain name, and replace ID with the ID of the ticket (NOT the event ID).
You can get the ticket ID by going to the main Products page in WooCommerce and clicking on the ticket. Look at the URL in your browser address bar, and you’ll see the ID as part of the URL.
For example, if my ticket ID was 8263 and my domain was barn2.co.uk then the button link should be: https://barn2.co.uk/cart/?add-to-cart=8263.
- 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’. I’ve included shortcodes=”true”, which tells Posts Table Pro to display the button properly.
[posts_table post_type="tribe_events" columns="title,cf:_EventStartDate:Date,tax:tribe_events_cat:Category,cf:price,cf:add-to-cart" shortcodes="true"]
It’s frustrating how disjoined events and tickets are, but that’s just how The Events Calendar plugin works. I hope these suggestions help you to work around it.
Can I list recurring events from Events Calendar Pro?
Unfortunately it’s not possible to list recurring events because the individual events in a series are not stored as separate event posts in the WP database. You can list the main parent event in Posts Table Pro, but not each individual event.
Instead, you would need to create the series of events manually, without using recurring events. The easiest way to do this is to create one event, and then clone it to create the others in the series using the free Duplicate Post plugin. This works nicely with Events Calendar Plugin Pro and Posts Table Pro, and is a good alternative to recurring events.
Creating tables using other events calendar 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 Plugin 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. Specifically, you need to know the name of the events custom post type, plus the custom fields and taxonomies used to store the event data. 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 WordPress event plugin, you can use the instructions in this article to set up your shortcode.
If it’s not possible to display a particular piece of information about your event (i.e. because it’s stored in the wrong format), don’t worry. You can still use the Posts Table Pro plugin to list events in a table. You just need to create your own custom field or taxonomy, add it to the events post type, and manually add the data there. This gives you full control so you can show the event data as a column in the events table or list.
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! Use the WordPress table plugin to display all sorts of content in many different ways. You can use it as a WordPress document library plugin listing your publications in a knowledge hub. If you have audio or video on your site, you could even use it to create a WordPress video gallery or audio library. Or display tables of members in a member directory with profiles.