The Events Filter Bar block puts a small search form above an event listing. Visitors narrow the list by keyword, category, venue or date, and the results change without the page reloading.
The Filter Bar is part of HappenBoard Pro. See what Pro adds.
Which blocks it filters
The bar filters listings from the free plugin. Not every listing understands every filter:
| Listing | Filters it follows |
|---|---|
| Event Query Loop | All of them: search, category, tag, venue, organizer and date range. |
| Events List and Events Grid | Search, category, tag and venue. They always show upcoming events, so the date range and organizer filters do not change them. |
| Upcoming Events | None. It is refreshed with the others but always shows the next events. |
What a visitor picks replaces the block’s own setting for that filter. For example, an Event Query Loop set to one category shows the category the visitor chooses instead.
The bar does not filter the Calendar block, the Pro display blocks, the Events Clustered Map or the Events Near Me block. To get every filter working, pair the bar with an Event Query Loop.
Add the Filter Bar
- Open the page that holds your listing, or add one of the event listing blocks to it.
- Insert the Events Filter Bar block directly above the listing.
- In the Facets panel of the sidebar, choose the filters to offer.
- Save the page.
One bar per page is enough: it refreshes every listing on the page.
Choose the filters
| Setting | What visitors get | Default |
|---|---|---|
| Free-text search | A Search box. It keeps the events whose title, excerpt or description contain the words typed. | On |
| Category filter | A Category dropdown with your event categories. | On |
| Tag filter | A Tag dropdown with your event tags. | Off |
| Venue filter | A Venue dropdown with your published venues, up to 200. | On |
| Organizer filter | An Organizer dropdown with your published organizers, up to 200. Event Query Loop only. | Off |
| Date range | A When dropdown: Upcoming, Today, This week, This month or Custom range. Custom range shows a From and a To day. Event Query Loop only. | On |
Each dropdown starts on All. The category and tag dropdowns only list terms used by at least one published event. A dropdown with nothing to list is left out: with no tags in use, there is no tag dropdown even if the toggle is on. Set up your categories and tags first to get a useful bar.
This week and This month cover the whole current week or month, including the days already past.
Layout
The Layout panel has two settings:
- Direction: Horizontal for a bar above the listing, or Vertical (sidebar) for a column beside it.
- Default range: the option the When dropdown shows first, Upcoming by default, or Today, This week or This month. With one of the last three, the Event Query Loop on the page opens already narrowed to that range. Reset also returns to this range.
The Default range applies on arrival only when the bar sits in the page’s own content. A bar placed in a template part or a widget area leaves the listing on its own date setting until the visitor presses Filter.
What visitors see
- The visitor sets one or more filters and presses Filter.
- The listing updates in place. The page does not reload and the visitor keeps their place.
- Screen readers announce the result, such as “4 events found.” or “No events match these filters.”, and the keyboard focus stays where it was.
- The page address changes to match. The visitor can bookmark or share the filtered view, and opening that link shows the same results with the form filled in.
- The browser’s Back and Forward buttons move between earlier selections.
- Reset clears every filter, puts When back on the default range and refreshes the listing.
If the update fails, the browser loads the page normally with the same filters, so the visitor still gets the results.
Next steps
- The Event Query Loop block: the listing that follows every filter.
- Event listing blocks: the Events List and Events Grid blocks.
- Categories, tags and colors: give the bar something to filter by.
- The Events Near Me block: let visitors search by place and distance.