Creating Custom Filters for Filter Bar

Do you need to use a custom filter in The Filter Bar? We’ve got you covered!

Suppose you have a calendar loaded with events that span all hours of the day. You can already filter by a pretty general time as seen in the screenshot below:

screenshot of the events calendar with the existing time of day filters expanded on the left

But what if you want to allow for more granular filtering, perhaps by a specific time? We’ll show you how in this tutorial.

Before You Begin

Make sure you have a backup of your site files and database.

Getting Started

The easiest way to create a new filter is to modify an existing filter.
You can find the filters in your plugins directory at: /events-filterbar/src/Tribe/Filters/

Since we’ll be adding a custom filter that is similar to the existing Time of Day filter, I’m going to grab that one.

The first thing I want to do is change the class name to describe the new filter I’m building.

Tribe__Events__Filterbar__Filters__Time_Of_Day_Custom

I’ll also need to decide what type of filtering I want to display. The checkbox filter is a good fit for this so I’ll go ahead and keep that in place.

So far my class looks like this:

screenshot of code editor view of custom class

Customizing the code

The next part is where things get interesting. We need to change both the get_values() function and the setup_join_clause() functions in order for our new filters to work.

Changing the array values

The current code allows us to filter in six-hour blocks. We’ll modify that to allow filtering by the hour.

In the function get_values(), change the time of day array to look like this:

screenshot of time-of-day array code

The rest of the get_values() function will stay the same.

Changing the variable names

The next function we need to look at is the setup_where_clause(). Note that we’re not changing the setup_join_clause() that precedes it.
Let’s change the variable names in the setup_join_clause() to more accurately describe the new values we want to filter on. Our function now looks like this:

Instantiate the Class

The last thing we’ll need do is to instantiate the new class like so:

new Tribe__Events__Filterbar__Filters__Time_Of_Day_Custom( __( 'Time Custom', 'tribe-events-filter-view' ), 'timeofdaycustom' );

Wrapping it all up

Our final code looks like this:

https://gist.github.com/trishasalas/64e500f67b3fcc38ad6ae01a307d0edd

You can add this code to your theme’s functions.php file, or better yet, create a custom function plugin. Read more about what a Custom Function plugin is and why you’d want to use on in this article by Justin Tadlock.

How to use your new Filter

Once you have your code in place, you’ll need to adjust your settings in Events > Settings > Filters so that your new filter will display on the front end.

Once you have that done, you should have the new filters in the Filter Bar, like so:

Final Thoughts

Now that you’ve seen how easy it is to modify and extend the existing filters, hopefully, this will spark some ideas for you to create your own!

Let us know if you come up with anything cool. We’d love it if you'd share with the community!