Configuring Filter Bar

Congratulations on picking up the Filter Bar add on! You’re probably excited to unleash your new calendar filtering powers, so let’s go over the the ways you can configure the plugin to suit your needs.

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 > Filter Bar in your WordPress admin.

filter bar settings

 

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

If you have Filter Bar and Events Calendar PRO, you'll also see one more available filter: 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 box 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.

Note: 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 box.

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

how to configure filter bar by drag and drop sorting

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.

Modify Filter Bar Active Filter Options

Note: 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.”

For more help with venue data, see Troubleshooting Map View.

Additional Fields

If you use Events Calendar PRO 4.0+, then 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.

Configure filter bar additional fields

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 Additional Field to Filter Bar's settings, this Additional Field will not appear on the front-end unless at least one of your events has a value set for this particular Additional Field.

Filter Bar Layout

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

That’s awesome, but let’s say you prefer the filters to display to the left of the calendar? No problem! We can do that by selecting “Vertical” in the Filters Layout option:

configure filter bar between vertical or horizontal layouts

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

Configuring the Default State

Configure filter bar default state as open or closed

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.

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.