Event Search & Filter Bar Shortcodes & Attributes Guide

A shortcode is a simple code snippet that lets you add the Events Search & Filter Bar anywhere on your WordPress website.

You can place it inside a page, post, widget, Gutenberg Shortcode block, Elementor, Divi, or any page builder that supports WordPress shortcodes.

Think of it as a command that tells WordPress:

“Show my event search bar here with these search, filter, design, and result settings.”

Shortcode Format

Events Search & Filter Bar provides two shortcodes:

• Event Search and Filter Bar Shortcode : This shortcode displays the event search and filter bar.

[events-calendar-search]

• Events Results Shortcode: This shortcode displays the matching event results.

[events-calendar-search-results]

Make sure the Search Bar and Results shortcodes are added correctly and use the same target value. If the target values are different, the search bar cannot connect to the results section.

Shortcode Attributes

Here is the list of shortcode attributes that you can use for customization:

Event Search Bar & Filter Attributes

• target: Connects the search bar section to a search result with the same target value.
• placeholder: Changes the text displayed inside the empty keyword search field.
• typeahead: Control whether matching event suggestions appear while the visitor types.
• facets: Control which search and filter options should appear. Available values: search, date, category, tag, venue, and organizer.
• search-fields: Control which event fields should be checked when visitors enter a keyword. Available values:
  • title: Searches event titles.
  • content: Searches event descriptions.
  • venue: Searches venue names.
  • organizer: Searches organizer names.
• location-field: Shows or hides the location search field. It allows visitors to search by city, state, province, or country using event venue information.
• results-mode: Control where matching events should be displayed. Available values:
  • none: Shows type-ahead suggestions without a results section.
  • inline: Displays results on the same page.
  • page: Sends visitors to a separate results page.
• results-page: Define the destination page when results-mode="page" is used.
• target: Connect a search bar to a particular results section.
• filters-visibility: Control where and how the filters should appear.
• filter-style: Changes the appearance of individual filter controls.
• filters-button-style: Control the appearance of the filter button.
• bar-template: Controls how the search field and search button should be arranged. Available values:
  • joined: Displays the field and button inside one joined frame.
  • detached: Displays the field and button separately.
• button-style: Changes the appearance of the search button.
• accent-color: Changes the main colour used for the search button, active filters, and other highlighted elements.
• text-color: Changes the colour of the search bar text and labels.
• bg-color: Changes the background colour of the search bar and its filter panels.
• control-size: Adjust the size of the complete search bar.
• corner-radius: Adjust the corner rounding of the search bar, buttons, panels, and related elements.

Event Search Results Attributes

The results shortcode supports the following attributes:

• target: Connects the results section to a search bar with the same target value.
• view: Choose the results layout from list or grid.
• per-page: Controls how many events should appear per page.
• columns: Set the number of columns in a Grid view.
• card-size: Adjust the event card size.
• control-size: Adjust the size of the result section.
• corner-radius: Controls the corner rounding of result cards and controls.
• card-fields: Select the details displayed on event cards. Values: image, title, date, venue, cost.
• date-format: Choose the event date format.
• template: Select the event card design. Values: modern, clean.
• accent-color: Changes the highlighted colour used in the results section.
• text-color: Changes the event results text colour.
• bg-color: Changes the event results background colour. It accepts a HEX colour or transparent.