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:
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.
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.
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:
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:
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:
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:
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!