Configuring the Events Calendar Filter Bar

Finding the filter settings

The first thing you’ll want to do is head over to the Filter Bar settings, which you can find under Events → Settings → Filters in your BBWP site admin.

Choosing what to filter

The first set of options that can be configured are the filters that are available to include in the filter bar. By default, the following options are available:

• Event Category: View only events in specific categories
• Cost ($): View events within a certain price range
• Tags: View only events which have certain tags
• Venues: View events that are happening at specific venues
• Organizers: View only events with certain organizers
• Day: View only events specific day(s) of the week
• Time: View events that take place in a certain part of the day, e.g. Morning
• Country: View events with venues in a particular country
• City: View events with venues in a particular city
• State/Province: View events with venues in a particular state or province
• Featured Events: View Featured Events only
• Distance: This filter shows if a visitor uses the Location search on any calendar view. They can use the filter to narrow the initial search to a specific radius from the defined location.

Check and unchecking filters in the Available Filters panel has two effects. The first is that it will add or remove filters to the Active Filters box on the right. The second is that it will add or remove the options that visitors see on the front end of the website when viewing the filter bar on the calendar page.

The options available to site visitors using the Country, City, or State/Province filters are defined by your published venues. The filters only include data from published venues that are assigned to a past, present, or future event. The information from venues which are not associated with any published events will not be used in the filters.

Configuring the active filters

Now that you’ve chosen which filters to include, you can configure how they display on your website by arranging them in the Active Filters panel.

You can choose in what order the filters will display. Click and drag each item to the change their order.

Next you can configure how each filter displays and behaves. Every filter in the Active Filters list can be expanded by clicking the down arrow to the right to reveal advanced options. For example, expanding the Cost ($) filter reveals options to change the display from a slider to checkboxes and whether to include free events in the filtered events.

Make sure your venue locations have been validated by Google Maps in order for the filters to correctly appear in the options. This will avoid issues with states being listed as separate entries such as CA and California.

The Events Calendar has a built-in feature that checks for broken venue data and will correct it for you. If you head over to Events → Settings, there is a section called Map Settings and a button that says “Fix venues data.”

Additional fields

You have the extra option of being able to add any Additional Fields you’ve created to the Filter Bar.  Let’s say, for example, you have a custom field for Dress Attire. That custom field will be available in the list of configurable options for Filter Bar, allowing you to display and customize the appearance of that field in the Filter Bar.

Notice the extra option to configure the Logic for this filter. This allows you to set a condition that filters events based on whether an event meets all the criteria of a user’s selection or any part of it. For example, if we had an event that was offered both Black Tie and Casual options for Dress Attire, then we could tell the Filter Bar to show all events related to either option or both of them.

Note that even if you add a Pro custom field to Filter Bar’s settings, it will not appear on the front end unless at least one of your events has a value set for this particular field.

Filter Bar layout

By default, Filter Bar is displayed as a horizontal bar across the top of your calendar.

If you prefer the filters to display to the left of the calendar, you can do that by selecting “Vertical” in the Filters Layout option:

Now, our filters will display next to the calendar vertically instead of above the calendar:

Configuring the default state

By default, the Filter Bar will be open to reveal the filter options on the front end. If you prefer to hide the filtering options by default, you can select “Closed” in the Filters Default State option. This will collapse the filter bar and display a “Show Filters” link instead which, when clicked, will expand filter bar to display the available filters to visitors.

It’s worth noting that mobile view follows slightly different rules. There, the filters will always be closed by default, irrespective of the above setting.

Enabling live refresh

Filter Bar supports live reloading. That means the calendar will update automatically when the user makes selections.

There is an option to disable this in the Filter Bar settings.

Pro Tip: Always save your changes

When configuring your Filter Bar settings, it’s important to remember to save your work by clicking the Save Changes button. It’s easy to forget, but a necessary step to ensure that all your hard work is saved and works.