How to Add an Search & Filter Bar in The Events Calendar?

Events Search & Filter Bar plugin provides you the option to add a customizable event search and filter bar to your events listing using a smart shortcode.

The plugin automatically generates the required shortcodes based on the options you select. You can simply copy the shortcode and add it to any WordPress page, post, widget, or page-builder section.

The plugin gives you two display options:

• Event Search Box only
• Event Search Box with Filter Bar

Now, let’s discuss each option in detail.

Add Event Search Bar Only

The Event Search Box gives visitors a quick way to find events using keywords. By default, it searches event titles, but you can also configure it to search event descriptions, venue names, and organizer names.

Follow these steps to generate an event search bar shortcode:

• Log in to your WordPress Dashboard.
• Navigate to Events Addons > Search & Filter Bar.

• From the Setup tab, configure the following options:
  • What to display: Select Search box only to display a simple keyword search field without additional event filters.
  • Where should search results appear: Choose where visitors should see matching event results, such as Typing dropdown suggestions, Below search bar, or A separate page.
  • Match search keyword in: Select the event fields where the search keyword should be matched, such as Title, Description, Venue name, or Organizer name.
  • Location search in the bar: Enable this option to let visitors search for events by city, region, or country.
  • Customize Default Events Page: Choose how the search bar should work on your default Events page:
    • Don’t change anything: Keep the default Events page unchanged.
    • Replace all – filters & results: Replace the existing search, filters, and event results.
    • Replace search & filters only: Replace only the search and filter bar while keeping the existing event results.
• Check the live preview to see how the search box will appear.

• Click Save as default settings if you want the selected options to apply whenever the generated shortcode is used.
• Copy the generated shortcode and paste it into the page, post, widget, or page-builder section where you want to display the event search box.

Shortcode Example

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

Output

Add Event Search Bar with Filters

The Event Search Box with Filters gives visitors more control over how they find events. Along with keyword search, visitors can narrow the event list using filters such as date, category, tag, venue, and organizer.

Follow these steps to generate event search bar with filters shortcode:

• Log in to your WordPress Dashboard.
• Navigate to Events Addons > Search & Filter Bar.

• From the Setup tab, configure the following options:
  • What to display?: Choose Search box with filters to display the event search box along with additional filters.
  • Where should search results appear?: Choose Below search bar to display matching events directly below the search bar, or select A separate page to show results on a dedicated page.
  • Match search keyword in: Select the event fields where the entered keyword should be matched, such as Title, Description, Venue name, or Organizer name.
  • Location search in the bar: Enable this option to add a location field, allowing visitors to search for events by city, region, or country.
  • Customize Default Events Page: Choose how the search and filter bar should work on your default Events page:
    • Don’t change anything: Keep the default Events page unchanged.
    • Replace all – filters & results: Replace the existing search, filters, and event results.
    • Replace search & filters only: Replace only the search and filter bar while keeping the existing event results.
• Check the live preview to see how the search and filter bar will appear.

• Click Save as default settings if you want the selected options to apply whenever the generated shortcode is used.
• Copy the generated shortcode and paste it into the page, post, widget, or page-builder section where you want to display the event search box with filters.

Customize Event Filters

Follow the steps below to easily customize your event filter bar:

• From the Filters tab, configure the following options:

• Choose filters to show in the bar: Enable the filters you want visitors to use, such as Date, Category, Tag, Venue, or Organizer. You can also drag and reorder the filters to control their order in the search bar.
• Where should filters appear: Choose how the filters should be displayed:
  • Button inside the bar: Show filters through a button inside the search bar.
  • Inside the bar: Display the filter controls directly within the search bar.
  • Below the bar: Display the filters below the search bar.
  • Always expanded: Keep the filter options expanded and visible.
• Filter controls style: Choose the appearance of your filter controls. Available styles include Text, Pill, Select, and Soft.

Shortcode Example

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

Output