{"id":1959175,"date":"2024-01-19T12:32:24","date_gmt":"2024-01-19T17:32:24","guid":{"rendered":"https:\/\/theeventscalendar.com\/knowledgebase\/?p=1959175"},"modified":"2026-04-17T18:16:15","modified_gmt":"2026-04-17T22:16:15","slug":"customizing-filter-bar","status":"publish","type":"post","link":"https:\/\/theeventscalendar.com\/knowledgebase\/customizing-filter-bar\/","title":{"rendered":"Customizing the Event Filter Bar"},"content":{"rendered":"\n

The Filter Bar add-on includes admin settings for layout, default state, and which filters appear \u2014 but some customizations require a small snippet. This article collects three common recipes: adjusting how many venues and organizers are loaded into the filter dropdowns, forcing the Filter Bar to appear open on mobile, and forcing vertical filters to stay expanded on desktop.<\/p>\n\n\n\n

Before adding any of the snippets below, please review our Best Practices for Implementing Custom Code Snippets<\/a> guide. We recommend using a plugin like Code Snippets<\/a> rather than editing functions.php<\/code> directly.<\/p>\n\n\n\n

Adjusting Venue and Organizer Limits<\/h2>\n\n\n\n

By default, the Venue and Organizer filters in the Filter Bar dropdown are capped at 200 entries each. This cap exists to protect front-end performance \u2014 loading hundreds of venues or organizers into a filter dropdown on every calendar page view can slow things down significantly. If your site has more than 200 of either, you can raise the limit with a WordPress filter.<\/p>\n\n\n\n

Filter: Total Venues in Filter Bar<\/h4>\n\n\n\n

This filter controls how many venues are loaded into the Filter Bar dropdown.<\/p>\n\n\n\n

\/**\n * Filter Total Venues in Filter Bar\n *\n * Use this with caution \u2014 this will load venues on the front-end and\n * may cause slow performance if there are many venues.\n *\n * The base limit is 200 for safety reasons.\n *\n * @param int   $limit       The number of venues to load (default: 200)\n * @param array $venue_ids   IDs of venues attached to events\n *\/\n$limit = apply_filters( 'tribe_eventsfilter_bar_venues_limit', 200, $venue_ids );<\/code><\/pre>\n\n\n\n
Example: Increase the venue limit to 500<\/strong><\/p>\n\n\n\n
add_filter( 'tribe_eventsfilter_bar_venues_limit', function( $limit ) {\n    return 500; \/\/ Increase the limit from 200 to 500\n});<\/code><\/pre>\n\n\n\n
Filter: Total Organizers in Filter Bar<\/h4>\n\n\n\n
This filter controls how many organizers are loaded into the Filter Bar dropdown.<\/p>\n\n\n\n
\/**\n * Filter Total Organizers in Filter Bar\n *\n * Use this with caution \u2014 this will load organizers on the front-end and\n * may cause slow performance if there are many organizers.\n *\n * The base limit is 200 for safety reasons.\n *\n * @param int   $limit          The number of organizers to load (default: 200)\n * @param array $organizer_ids  IDs of organizers attached to events\n *\/\n$limit = apply_filters( 'tribe_events_filter_bar_organizers_limit', 200, $organizer_ids );<\/code><\/pre>\n\n\n\n
Example: Increase the organizer limit to 300<\/strong><\/p>\n\n\n\n
add_filter( 'tribe_events_filter_bar_organizers_limit', function( $limit ) {\n    return 300; \/\/ Increase the limit from 200 to 300\n});<\/code><\/pre>\n\n\n\n
Performance Note<\/h4>\n\n\n\n
Raising these limits significantly may impact performance, especially on sites with hundreds or thousands of venues and organizers. If you notice slow loading times on your calendar pages after raising a limit, consider lowering it again or optimizing your database.<\/p>\n\n\n\n
Summary<\/h4>\n\n\n\n
Filter Name<\/th>Default Limit<\/th>Purpose<\/th>Caution<\/th><\/tr><\/thead>
tribe_events_filter_bar_venues_limit<\/code><\/td>200<\/td>Controls how many venues appear in the Filter Bar<\/td>May slow front-end loading<\/td><\/tr>
tribe_events_filter_bar_organizers_limit<\/code><\/td>200<\/td>Controls how many organizers appear in the Filter Bar<\/td>May slow front-end loading<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Showing Filter Bar on Initial Page Load on Mobile<\/h2>\n\n\n\n
Filter Bar can be set up with a vertical or horizontal layout. When using the horizontal layout, you can choose the default state under Events \u2192 Settings \u2192 Filters<\/em>: either “collapsed until opened” or “show already on page load.”<\/p>\n\n\n\n
\"Layout
Layout and default state settings for Filter Bar under Events \u2192 Settings \u2192 Filters<\/em><\/figcaption><\/figure>\n\n\n\n