Knowledgebase | The Events Calendar

Event List Widget Settings

We’re going to go over the Event List Widget in this tutorial, including how to configure it, things to expect from it, and perhaps some tips and tricks you can use at your next cocktail party. You’ll be the star of the show, for sure.

Adding the Widget to a Sidebar

The first thing to note is about the Event List widget is where to find it. The widget comes packaged with the core version of The Events Calendar. You’ll find it Appearance > Widgets from the WordPress dashboard. Drag that little guy into the sidebar area of your choice, and you’re off to the races!

Select the WordPress widget and drag it to the sidebar

Events Widget Settings

There are three settings that help customize the Event List widget experience. Let’s take a look at them:

  • Title: This is the heading that sits above the widget. By default, this is “Upcoming Events” but it can be changed to anything you’d like.
  • Show: This is the maximum number of events you want to display at any given time. Five is the default, but this can be any number between one and ten.
  • Show widget only if there are upcoming events: Check the box for this option and the widget will automatically hide itself if there are no events forthcoming. Otherwise, it will display a handy notice saying there are no upcoming events at this time.
  • Limit to featured events only: Check the box for this option and the widget will display featured events.
  • Generate JSON-LD data: Enable this setting if you would like to enable structured data in the widget. Structured data is what search engines use to recognize calendar content on and display events in the search results if the data is there and processed by the search engine.

Configuring the PRO Version

It’s important to bear in mind that the Event List widget in The Events Calendar PRO is the same widget that comes with the core version of The Events Calendar. If you have PRO, you’ll see the same Event List widget under Appearance > Widgets. This time, however, you’ll see some visual differences and more available options that allow us to customize the widget further.

Event List Widget in The Events Calendar vs Events Calendar Pro

Notice that there are quite a few differences between the Event List widget in core versus in PRO:

  • PRO includes a calendar icon with the date
  • PRO includes information about recurring events
  • PRO includes location information

It should come as no surprise that these visual differences lead to more configurable options when setting up the widget. Add the widget to the sidebar the same way as described above, and now you’ll see more options. In addition to the same three options in the core widget, PRO introduces these settings:

kb-widgets-list-add-pro-2
  • Display: This is a set of checkboxes that allow you to toggle the display of different bits of information, including:
    • Venue
    • Organizer
    • Street
    • City (Default)
    • State (US) or Province (Int) (Default)
    • Postal Code
    • Country (Default)
    • Phone
    • Price
  • Filter: This is an advanced setting that allows you to filter the events that display in the widget by a number of variables, including Categories and Tags. You can add multiple filters, and also multiples instances of the widget- so if you wanted you could have different widgets for different Event categories

Phew, that’s a lot of stuff! You really have a lot of options here to customize the widget’s content without touching a line of code and that’s awesome.

Theming the Widget

We actually have another tutorial that provides a specific example of how to customize the Event List widget, as well as an entire Themer’s Guide on how template overrides work in The Events Calendar. Still, it’s helpful to know what files to look for and what they do.

The template for the core Event List widget can be found at: /plugins/the-events-calendar/src/views/widgets/list-widget.php. This single file contains all the content and functionality for the widget. To override it, make a copy of it, then:

  • Make a new folder in the theme directory called tribe-events
  • Make a folder in that one called widgets
  • Drop the list-widget.php copied file in that last folder

Now that the template is in the theme, you can modify it to your liking. For example, you can customize the notice for when there are no upcoming events by changing this line:

<?php printf( __( 'There are no upcoming %s at this time.', 'tribe-events-calendar' ), strtolower( $events_label_plural ) ); ?>

…to something like:

<p> No events here. Holla! </p>

The process for customizing the widget in Events Calendar PRO is very similar. The difference is how many files there are and where you find them. First off, you can find the primary template at: /plugins/events-calendar-pro/src/views/pro/widgets/list-widget.php.

Open that up and you’ll see that the template actually includes another template called single-event.php which can be found in the modules folder in the same directory as the template.

Making modifications to the PRO version of the widget entails the same process, though you place the files in a different location. Make a copy of the file, then:

  • Make a new folder in the theme directory called tribe-events
  • Make a folder in that one called pro
  • Make a folder in that one called widgets
  • Drop the list-widget.php copied file in that last folder
  • Example: wp-content/themes/YOUR_THEME/tribe-events/pro/widgets/list-widget.php

If you were modifying the single-event.php template, you would create one last folder after widgets called modules and then drop the file in there instead (example: wp-content/themes/YOUR_THEME/tribe-events/pro/widgets/modules/single-event.php).

Wrapping Up

There we go! We covered a lot of ground in this tutorial. Hopefully, now you’ve got a better understanding of the Event List widget, how to configure it, how PRO extends it, and how to customize its templates. Still have some burning questions not covered here? Hit us up at our help desk and we’d be happy to help.