Looking to have users be able to filter the events from The Events Calendar (by Modern Tribe) anywhere on your WordPress site? While The Events Calendar Shortcode & Block gives you that ability:
What if you want to allow filtering by Organizer, City or something else not included in the available filters by default? We’ll show you how to add a custom filter in this tutorial!
Note: this tutorial is for advanced users, as we’ll be creating some custom code to create the filter. Ensure you have a backup of your files and your database before you get started.
Getting Started
We’ll create a custom functional plugin that will hold the code for one or more filters you’d like to add. This will have the following structure:
wp-content/plugins/tec-custom-filterbar-filter
/tec-custom-filterbar-filter.php
/filters
firstfilter.php
secondfilter.php
...
The WordPress plugin will have a main plugin file. Then, in the filters folder of the plugin, we’ll put one or more filters we want to add.
Here’s what the tec-custom-filterbar-filter.php file looks like:
<?php
/***
Plugin Name: The Events Calendar Shortcode Custom Filterbar Filters
Plugin URI: https://eventcalendarnewsletter.com/the-events-calendar-shortcode
Description: Filters for the filterbar of the shortcode
Version: 1.0
Author: Brian Hogg
Author URI: https://eventcalendarnewsletter.com/the-events-calendar-shortcode
Contributors: brianhogg
License: GPL2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
function my_tec_custom_load_filters()
{
foreach ( glob( trailingslashit( dirname( __FILE__ ) ) . 'filters/*.php' ) as $filter ) {
require_once( $filter );
}
}
add_action( 'plugins_loaded', 'my_tec_custom_load_filters', 999 );
The main plugin file will load our filter(s) at the right time, after all the plugins are loaded (including The Events Calendar Shortcode & Block).
Adding a Filter
Next we’ll add a filter in the filters folder. For example, say we want to add a filter by the organizer of an event. We can create the file organizer.php in the filters folder that might look like this:
<?php
if ( class_exists( 'TECS_Filterbar_Filter' ) && ! class_exists( 'TECS_Organizer_Filterbar_Filter' ) ) {
class TECS_Organizer_Filterbar_Filter extends TECS_Filterbar_Filter
{
public $name = 'organizer';
public $setting = 'organizer_id';
public function get_default_title()
{
return __( 'Organizer', 'the-events-calendar-shortcode' );
}
public function get_values( $values )
{
foreach ( tribe_get_organizers() as $organizer ) {
$values[$organizer->ID] = $organizer->post_title;
}
return $values;
}
}
new TECS_Organizer_Filterbar_Filter();
}
The filter is creating a new class TECS_Organizer_Filterbar_Filter extending the base TECS_Filterbar_Filter class of The Events Calendar Shortcode and changing it to meet the needs of our new filter. Let’s go through each of the properties and functions of the class.
$name
This is the unique value of our filter. This will need to be added to the filterorder option of the shortcode for it to appear, for example to add it to the beginning of our filters:
[ecs-list-events filterbar="true" filterorder="organizer, country, state, category, venue, tag"]
$setting
The shortcode setting that should be changed based on the value selected in the filter. In this case we want to filter events based on the selected organizer_id. This is the same as putting:
organizer_id="...selected value..."
inside the shortcode.
get_default_title()
The default title text for the filter. This can then be changed when adding the shortcode using filterbar-organizer-title if needed:
[ecs-list-events filterbar="true" filter-organizer-title="Select Organizer" filterorder="organizer, category"]
get_values( $values )
The values that will show in the dropdown are added using this function. In this case we add the organizer ID as the key and the organizer title as the value in the array.
You can see how the default filters are built in the /filters folder of the plugin.
new TECS_Organizer_Filterbar_Filter();
Here we are creating a new instance of the class, so it’ll be used by the filter bar.
Creating a Custom Setting
What if you want to filter by something that isn’t already an option? In this case you’ll need to create a new one. This is a little more advanced and requires some knowledge of how The Events Calendar queries are generated.
Let’s say you want to add an option to filter based on the cost of an event. First you’ll want to add the default value for the setting using the ecs_shortcode_atts filter:
function add_my_custom_tecs_attribute( $atts ) {
$atts['event_cost'] = '';
return $atts;
}
add_filter( 'ecs_shortcode_atts', 'add_my_custom_tecs_attribute' );
Then, using the ecs_get_events_args filter, you can modify the arguments that are passed to Modern Tribe’s tribe_get_events() function, for example:
function change_query_based_on_custom_tecs_attribute_value( $args, $atts ) {
if ( trim( $atts['event_cost'] ) and is_numeric( $atts['event_cost'] ) ) {
if ( ! isset( $args['meta_query']['relation'] ) )
$args['meta_query']['relation'] = 'AND';
$args['meta_query'][] = array(
'key' => '_EventCost',
'value' => intval( $atts['event_cost'] ),
'compare' => '=',
);
}
return $args;
}
add_filter( 'ecs_get_events_args', 'change_query_based_on_custom_tecs_attribute_value', 10, 2 );
Then, in the get_values() function of your filter, you can decide what possible costs to filter on:
public function get_values( $values )
{
$values['50'] = '50 dollars';
$values['100'] = '100 dollars';
$values['200'] = '200 dollars';
return $values;
}
Wrapping Up
Hopefully this helps you create a filter for your own WordPress event website’s needs! You can check out a demo of the filter bar and grab a copy of The Events Calendar Shortcode & Block to add event listings with the filter bar anywhere in a post, page or widget area as needed.
