Understanding and customizing the Tribe Events Bar

The new Tribe Events Bar is shown at the top of all events views. It consists of two parts: filters for the query and a list of views to access.

The list of views will show buttons unless it has more than 5 elements, in which case will show a combo box will all the views. That limit can be changed using the tribe-*_events-bar-views-breakpoint_* filter.

Displaying the bar in custom views

The bar will automatically be included in any page where the main query is a tribe events query. But if you want to add the bar to a view which doesn't make a tribe query in the first call (like the geoloc view), you should add this line in the method that load your template, before loading it.

add_filter( 'tribe-events-bar-should-show', '__return_true' );[

on the other hand, if you don't want to show the bar in your view, you should add:

add_filter( 'tribe-events-bar-should-show', '__return_false' );

Make sure you're calling these filters only when you're showing your view, but before the actual view load.

Deactivating the bar

If you're using the old templates or for any reason you don't want to use the new bar, add this to your functions.php

add_filter( 'tribe-events-bar-should-show', '__return_false', 9999 );

Adding filters

add_filter( 'tribe-events-bar-filters',  'setup_my_field_in_bar', 1, 1 );

function setup_my_field_in_bar( $filters ) {
	$filters['tribe-bar-my-field'] = array(
		'name' => 'tribe-bar-my-field',
		'caption' => 'My Field',
		'html' => '<input type="text" name="tribe-bar-my-field" id="tribe-bar-my-field">'
	);

	return $filters;
}

If you really need something beyond input elements you would need to workaround this limitation - which is beyond the scope of this tutorial. We do however hope to remove this limitation in a future release of The Events Calendar.

You are responsible for hooking into _*tribe_pre_get_posts*_, check if $_POST['tribe-bar-my-field'] has any content and modify the query accordingly. Example:

add_filter( 'tribe_events_pre_get_posts', 'setup_my_bar_field_in_query', 10, 1 );

function setup_my_bar_field_in_query( $query ){
	if ( !empty( $_REQUEST['tribe-bar-my-field'] ) ) {
		// do stuff
	}

	return $query;
}

Removing a filter

To remove a filter, you need to hook late into _tribe-events-bar-filter_ and unset the array position of the element you don't want. For example, if you want to remove the default "Keyword Search" field:

add_filter( 'tribe-events-bar-filters', 'remove_search_from_bar', 1000, 1 );

function remove_search_from_bar( $filters ) {
if ( isset( $filters['tribe-bar-search'] ) ) {
unset( $filters['tribe-bar-search'] );
}

return $filters;
}

Adding views

add_filter( 'tribe-events-bar-views', 'my_setup_view_for_bar', 10);

function my_setup_view_for_bar( $views ) {
$tec = Tribe__Events__Main::instance();
$views[] = array('displaying' => 'myview', 'anchor' => 'My view', 'url' => $tec->getOption( 'eventsSlug', 'events' ) . '/my_view_slug' );
return $views;
}

'displaying' is the value of Tribe__Events__Main->displaying. You can use the priority to order the list. Just for reference, this is how we add the standard list and grid views to core:

add_filter( 'tribe-events-bar-views',  'setup_listview_in_bar', 1, 1 );
add_filter( 'tribe-events-bar-views',  'setup_gridview_in_bar', 5, 1 );

function setup_listview_in_bar( $views ) {
	$views[] = array( 'displaying' => 'upcoming', 'anchor' => 'List View', 'url' => tribe_get_listview_link() );
	return $views;
}

function setup_gridview_in_bar( $views ) {
	$views[] = array( 'displaying' => 'month', 'anchor' => 'Calendar', 'url' => tribe_get_gridview_link() );
	return $views;
}