How to Add an Event Results Shortcode in The Events Calendar?

The Event Result Shortcode lets you display event results separately from the search bar. It works together with the Event Search & Filter Bar shortcode to show matching events when visitors perform a search or apply filters.

Using Events Search & Filter Bar plugin you can customize how the results appear, including the layout, card design, event details, date format, sorting, and number of results.

Generate Shortcode

Follow these steps to generate the results shortcode:

• From your WordPress Dashboard, navigate to Events Addons > Search & Filter Bar.
• From the Setup tab customize the event search & filter bar settings.

• Under Where should search results appear: Choose where you want to display matching event results:
  • Typing dropdown suggestions: Show matching events in a dropdown while visitors type in the search field.
  • Below search bar: Display matching events directly below the search bar.
  • A separate page: Display search results on a different page.

Now, the plugin generates two connected shortcodes:

• Search bar shortcode: Displays the event search and filter bar.
• Results shortcode: Displays the matching event results.

Both shortcodes use the same target value to connect the search bar with its corresponding results section.

Customize Event Results

Before adding the Results shortcode to your page, you can customize how your events results are displayed using the following settings:

• From your WordPress dashboard, go to Events Addons > Search & Filter Bar.

• Open the Results tab.
  • Results View: Choose the prefered layout from:
    • Grid: Displays events as cards arranged in columns.
    • List: Displays events in horizontal rows.
• Card Design: Choose the design for your event cards: Clean, and Modern.
• Card Size: Adjust the text size and spacing inside each event card.
• Items to Show Inside Card: Select the event information you want to display in the results:
  • Image: Displays the event featured image.
  • Title: Displays the event title.
  • Date: Displays the event date and time.
  • Venue: Displays the event venue.
  • Cost: Displays the event price or cost.
• Date Format: Choose how event dates and times should appear.
• Results Per Page: Set the number of events to load at one time.
• Default Sort: Choose the default order for your events.
• Events to Show: Choose whether to display Upcoming, Past, or All events.
• Recurring Events: Choose whether to show only the next date of a recurring event or all dates.
• Once you have configured the result settings, check the live preview to see how your event results will appear.

• Copy the generated shortcodes and paste them into the page, post, widget, or page-builder section.

Shortcode Example

Search Bar Shortcode:

[events-calendar-search target="ecsa-results-1" results-mode="inline" typeahead="off" location-field="1" search-fields="title,content,venue,organizer" facets="search,date,category,tag,venue,organizer"]

Results Shortcode:

[events-calendar-search-results target="ecsa-results-1"]

Output