{"id":1896520,"date":"2019-10-18T13:19:20","date_gmt":"2019-10-18T17:19:20","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/configuring-filter-bar-2\/"},"modified":"2024-08-20T11:14:59","modified_gmt":"2024-08-20T15:14:59","slug":"configuring-filter-bar","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/configuring-filter-bar\/","title":{"rendered":"Configuring Filter Bar"},"content":{"rendered":"\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/gEE6OaEsKyI?si=kXk3p20N64tgHUHd\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n\n<p>Congratulations on picking up the Filter Bar add on! You\u2019re probably excited to unleash your new calendar filtering powers, so let\u2019s go over the ways you can configure the plugin to suit your needs.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"find-settings\">Finding the filter settings<\/h2>\n\n<p>The first thing you\u2019ll want to do is head over to the Filter Bar settings, which you can find under <strong>Events \u2192 Settings \u2192 Filters<\/strong> in your WordPress admin.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2378\" height=\"1854\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/09\/FilterBarSettingsLocation.png\" alt=\"This screen indicates that the settings for Filter Bar are located under Events, Settings, and the Filters tab.\" class=\"wp-image-1958074\" srcset=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/09\/FilterBarSettingsLocation.png 2378w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/09\/FilterBarSettingsLocation-300x234.png 300w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/09\/FilterBarSettingsLocation-1024x798.png 1024w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/09\/FilterBarSettingsLocation-768x599.png 768w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/09\/FilterBarSettingsLocation-1536x1198.png 1536w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/09\/FilterBarSettingsLocation-2048x1597.png 2048w\" sizes=\"auto, (max-width: 2378px) 100vw, 2378px\" \/><\/figure>\n\n<h2 class=\"wp-block-heading\" id=\"what-to-filter\">Choosing what to filter<\/h2>\n\n<p>The first set of options that can be configured is the filters that are available to include in the filter bar. By default, only Event Category, Tags, Venue, Featured Events, and Cost are enabled, so if you\u2019d like to enable additional filters, you can do so under <strong>Events Settings &gt; Filters<\/strong>.  These are all of the available options:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Event Category<\/strong>: View only events in specific categories<\/li>\n\n<li><strong>Cost ($)<\/strong>: View events within a certain price range<\/li>\n\n<li><strong>Tags<\/strong>: View only events which have certain tags<\/li>\n\n<li><strong>Venues<\/strong>: View events that are happening at specific venues<\/li>\n\n<li><strong>Organizers<\/strong>: View only events with certain organizers<\/li>\n\n<li><strong>Day<\/strong>: View only events specific day(s) of the week<\/li>\n\n<li><strong>Time<\/strong>: View events that take place in a certain part of the day, e.g. Morning<\/li>\n\n<li><strong>Country<\/strong>: View events with venues in a particular country<\/li>\n\n<li><strong>City<\/strong>: View events with venues in a particular city<\/li>\n\n<li><strong>State\/Province<\/strong>: View events with venues in a particular state or province<\/li>\n\n<li><strong>Featured Events<\/strong>: View <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/featured-events\/#filter-bar\" target=\"_blank\" rel=\"noreferrer noopener\">Featured Events<\/a> only<\/li>\n\n<li><strong>Event Status<\/strong>: View events marked as <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/canceling-relocating-postponing-events\/\" target=\"_blank\" rel=\"noreferrer noopener\">canceled or postponed<\/a>.<\/li>\n<\/ul>\n\n<p>If you have Filter Bar and Events Calendar Pro, you&#8217;ll see a <strong>Virtual Events<\/strong> filter. Activating this filter will add a radio button filter with three options: view all events (default), view only virtual events, hide virtual events. You will also see a Moved Online event status option if you have events marked with that option.<br>Additionally you&#8217;ll find one more available filter: <strong>Distance<\/strong>. This filter&nbsp;shows if a visitor&nbsp;uses the Location search on any calendar view. They can use the filter to narrow the initial search to a specific radius from the defined location. You can change the distance units under <strong>Events Settings &gt; General<\/strong> under the Map Settings.<\/p>\n\n<p class=\"has-background\" style=\"background-color:var(--global-palette8)\"><strong>Note:<\/strong> In order for the Distance filter to work properly, you will need to enter a valid custom <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/setting-up-your-google-maps-api-key\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google Maps API Key<\/a> under <strong>Events Settings &gt; Integrations<\/strong>.<\/p>\n\n<p>With Events Calendar Pro and Filter Bar, you&#8217;ll also have the option to use a <strong>Series<\/strong> filter. This filter shows if you have configured at least one series for your events. Checking this option will allow users to see only events that are grouped together by a series.<\/p>\n\n<p>Check and unchecking filters in the Available Filters&nbsp;panel have two effects. The first is that it will add or remove filters to the Active Filters box on the right. The second is that it will add or remove the options that visitors see on the front end of the website when viewing the filter bar on the calendar page.<\/p>\n\n<p class=\"has-text-color has-background\" style=\"color:#141827;background-color:var(--global-palette8)\">The options available to site visitors using the Country, City, or State\/Province filters are defined by your published venues.&nbsp;The filters only include data from published venues that&nbsp;are assigned to a past, present, or future event. The information from venues that are not associated with any published events will not be used in the filters.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"active\">Configuring the active filters<\/h2>\n\n<p>Now that you\u2019ve chosen which filters to include,&nbsp;you can configure how they display on your website by arranging them in the Active Filters panel.<\/p>\n\n<p>You can choose in what&nbsp;order the filters will&nbsp;display. Click and drag each item to change their order.<\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2017\/07\/filter-bar_active-filters.gif\" alt=\"how to configure filter bar by drag and drop sorting\"\/><\/figure>\n\n<p>Next, you can configure how each filter&nbsp;displays and behaves. Every filter in the Active Filters list can be expanded by clicking the down arrow to the right to reveal advanced options. For example, expanding the Cost ($) filter reveals options to change the display from a slider to checkboxes and whether to include free events in the filtered events.<\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2017\/07\/filter-bar_active-filters_modify-filters.gif\" alt=\"Modify Filter Bar Active Filter Options\"\/><\/figure>\n\n<p class=\"has-text-color has-background\" style=\"color:#141827;background-color:var(--global-palette8)\">Make sure your venue locations have been validated by Google Maps in order for the filters to correctly appear in the options. This will avoid issues with states being listed as separate entries such as CA and California.<\/p>\n\n<p>The Events Calendar has a built-in feature that checks for broken venue data and will correct it for you. If you head over to&nbsp;<strong>Events \u2192 Settings<\/strong>, there is a section called Map Settings and a button that says \u201cFix venues data.\u201d<\/p>\n\n<p>For more help with venue data, see <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/troubleshooting-google-maps\/\" target=\"_blank\" rel=\"noreferrer noopener\">Troubleshooting Map View<\/a>.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"additional-fields\">Additional&nbsp;fields<\/h2>\n\n<p>If you use Events Calendar Pro 4.0+, then you have the extra option of being able to add any&nbsp;<a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/pro-additional-fields\/\" target=\"_blank\" rel=\"noreferrer noopener\">Additional Fields<\/a> you&#8217;ve created to the Filter Bar. &nbsp;Let&#8217;s say, for example, you have a custom field for Dress Attire. That custom field will be available in the list of configurable options for Filter Bar, allowing you to display and customize the appearance of that field in the Filter Bar.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1384\" height=\"676\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/09\/FilterBarCustomFields.png\" alt=\"This is the additional fields filter bar settings\" class=\"wp-image-1958077\" srcset=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/09\/FilterBarCustomFields.png 1384w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/09\/FilterBarCustomFields-300x147.png 300w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/09\/FilterBarCustomFields-1024x500.png 1024w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/09\/FilterBarCustomFields-768x375.png 768w\" sizes=\"auto, (max-width: 1384px) 100vw, 1384px\" \/><\/figure>\n\n<p>Notice the extra option to configure the Logic for this filter. This allows you to set a condition that filters events based on whether&nbsp;an event meets all the criteria of a user&#8217;s selection or any part of it. For example, if we had an event that was offered both Black Tie and Casual options for Dress Attire, then we could tell the Filter Bar to show all events related to either option or both of them.<\/p>\n\n<p>Note that even if you add a Pro custom field to Filter Bar&#8217;s settings, it&nbsp;will not appear on the front end unless at least one of your events has a value set for this particular&nbsp;field.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"layout\">Filter Bar layout<\/h2>\n\n<p>By default, Filter Bar is displayed as a horizontal bar across the top of your calendar.<\/p>\n\n<p>That\u2019s awesome, but let\u2019s say you prefer the filters to display to the left of the calendar. No problem! We can do that by selecting \u201cVertical\u201d in the Filters Layout option:<\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2017\/07\/filters-layout.png\" alt=\"configure filter bar between vertical or horizontal layouts\"\/><\/figure>\n\n<p>Now, our filters will display next to the calendar vertically instead of above the calendar:<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/03\/Screen-Shot-2021-03-10-at-9.51.36-AM.png\" alt=\"\" class=\"wp-image-1949383\"\/><\/figure>\n\n<h2 class=\"wp-block-heading\" id=\"default-state\">Configuring the default state<\/h2>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2020\/09\/Screen-Shot-2020-09-28-at-2.31.01-PM.png\" alt=\"Configure filter bar default state as open or closed\" class=\"wp-image-1948258\"\/><\/figure>\n\n<p>When using the horizontal layout, then by default, the Filter Bar will be collapsed on the front end, so that users can expand the specific options as they&#8217;d like.  Note, you will not see this option with the vertical layout. If you prefer to hide the filtering options by default, you can select \u201cStay collapsed until visitors open it\u201d in the Filters Default State option when using the horizontal layout. This will collapse the filter bar and display a \u201cShow Filters\u201d link instead which, when clicked, will expand the filter bar to display the available filters to visitors.  The option to hide the filters on the initial page load is only available when Filter Bar is in the horizontal state.<\/p>\n\n<p>It&#8217;s worth noting that mobile view follows slightly different rules. There, the filters will <em>always<\/em> be closed by default, irrespective of the above setting.<\/p>\n\n<h2 class=\"wp-block-heading\">Pro Tip: Always save your changes<\/h2>\n\n<p>When configuring your Filter Bar settings, it\u2019s important to remember to save your work by clicking the Save Changes button. It\u2019s easy to forget, but a necessary step to ensure that all your hard work is saved and works.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Congratulations on picking up the Filter Bar add on! You\u2019re probably excited to unleash your new calendar filtering powers, so let\u2019s go over the ways you can configure the plugin to suit your needs. Finding the filter settings The first thing you\u2019ll want to do is head over to the Filter Bar settings, which you&#8230;<\/p>\n","protected":false},"author":3,"featured_media":1955565,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"ep_exclude_from_search":false,"footnotes":""},"categories":[74],"tags":[],"stellar-product-taxonomy":[159],"class_list":["post-1896520","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-filter-bar","stellar-product-taxonomy-filter-bar"],"acf":[],"taxonomy_info":{"category":[{"value":74,"label":"Search Filters"}],"stellar-product-taxonomy":[{"value":159,"label":"Filter Bar"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"Jaime Marchwinski","author_link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/author\/jaimetri-be\/"},"comment_info":0,"category_info":[{"term_id":74,"name":"Search Filters","slug":"filter-bar","term_group":0,"term_taxonomy_id":74,"taxonomy":"category","description":"","parent":61,"count":8,"filter":"raw","term_order":"0","cat_ID":74,"category_count":8,"category_description":"","cat_name":"Search Filters","category_nicename":"filter-bar","category_parent":61}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1896520"}],"version-history":[{"count":8,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896520\/revisions"}],"predecessor-version":[{"id":1962555,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1896520\/revisions\/1962555"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1896520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1896520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1896520"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1896520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}