We’d like to create our own filter based on the built-in Day filter, but instead of giving the user a list of checkboxes, we want them to select from a drop-down list.<\/p>\n
We’ve begun by taking a copy of the code in src > Tribe > Filters > Day_Of_Week.php and placing it in our functions.php. The only thing we’ve changed is the name of the class (to Tribe__Events__Filterbar__Filters__Day_Of_Week_Dropdown) and $type, which we’ve set to ‘select’.<\/p>\n
We’ve also added an action hook to register the new filter.<\/p>\n
Here’s the actual code:<\/p>\n
\nclass Tribe__Events__Filterbar__Filters__Day_Of_Week_Dropdown extends Tribe__Events__Filterbar__Filter {\n\n public $type = 'select';\n\n protected function get_values() {\n $day_of_week_array = array(\n __( 'Sunday', 'tribe-events-filter-view' ),\n __( 'Monday', 'tribe-events-filter-view' ),\n __( 'Tuesday', 'tribe-events-filter-view' ),\n __( 'Wednesday', 'tribe-events-filter-view' ),\n __( 'Thursday', 'tribe-events-filter-view' ),\n __( 'Friday', 'tribe-events-filter-view' ),\n __( 'Saturday', 'tribe-events-filter-view' )\n );\n\n \/\/ Get WordPress system value for the start of the week, keep in mind that on WordPress it\n \/\/ starts on 0 instead of 1 like we did above.\n $sys_week_start = absint( get_option( 'start_of_week', 0 ) );\n\n $sorted = range( 0, 6 );\n\n \/\/ Push the items of the array until the start_of_week to the end\n for ( $i = 0; $i < $sys_week_start; $i ++ ) {\n array_push( $sorted, array_shift( $sorted ) );\n }\n\n $day_of_week_values = array();\n foreach ( $sorted as $n ) {\n $day_of_week_values[] = array(\n 'name' => $day_of_week_array[ $n ],\n 'value' => $n + 1,\n );\n }\n\n return $day_of_week_values;\n }\n\n \/**\n * Add modifications to the query\n *\n * @return void\n *\/\n protected function setup_query_filters() {\n global $wp_query;\n \/\/ band-aid for month view\n if ( $wp_query->is_main_query() && $wp_query->get( 'eventDisplay' ) == 'month' ) {\n $wp_query->set(\n 'meta_query', array(\n array(\n 'key' => '_EventStartDate',\n 'type' => 'DATETIME',\n ),\n )\n );\n }\n parent::setup_query_filters();\n }\n\n protected function setup_join_clause() {\n add_filter( 'posts_join', array( 'Tribe__Events__Query', 'posts_join' ), 10, 2 );\n }\n\n protected function setup_where_clause() {\n\n \/** @var wpdb $wpdb *\/\n global $wpdb;\n $clauses = array();\n $values = array_map( 'intval', $this->currentValue );\n $values = implode( ',', $values );\n\n $eod_cutoff = tribe_get_option( 'multiDayCutoff', '00:00' );\n if ( $eod_cutoff != '00:00' ) {\n $eod_time_difference = Tribe__Events__Date_Utils::timeBetween( '1\/1\/2014 00:00:00', "1\/1\/2014 {$eod_cutoff}:00" );\n $start_date = "DATE_SUB({$wpdb->postmeta}.meta_value, INTERVAL {$eod_time_difference} SECOND)";\n $end_date = "DATE_SUB(tribe_event_end_date.meta_value, INTERVAL {$eod_time_difference} SECOND)";\n } else {\n $start_date = "{$wpdb->postmeta}.meta_value";\n $end_date = "tribe_event_end_date.meta_value";\n }\n\n $clauses[] = "(DAYOFWEEK($start_date) IN ($values))";\n\n \/\/ is it on at least 7 days (first day is 0)\n $clauses[] = "(DATEDIFF($end_date, $start_date) >=6)";\n\n \/\/ determine if the start of the nearest matching day is between the start and end dates\n $distance_to_day = array();\n foreach ( $this->currentValue as $day_of_week_index ) {\n $day_of_week_index = (int)$day_of_week_index;\n $distance_to_day[] = "MOD( 7 + $day_of_week_index - DAYOFWEEK($start_date), 7 )";\n }\n if ( count($distance_to_day) > 1 ) {\n $distance_to_next_matching_day = "LEAST(".implode(',', $distance_to_day).")";\n } else {\n $distance_to_next_matching_day = reset($distance_to_day);\n }\n $clauses[] = "(DATE(DATE_ADD($start_date, INTERVAL $distance_to_next_matching_day DAY)) < $end_date)";\n\n $this->whereClause = ' AND ('.implode(' OR ', $clauses).')';\n }\n}\n\nfunction add_custom_fields_to_tribe_filter_bar(){\n new Tribe__Events__Filterbar__Filters__Day_Of_Week_Dropdown('Day Dropdown', 'dayofweekdropdown');\n}\nadd_action('tribe_events_filters_create_filters', 'add_custom_fields_to_tribe_filter_bar');\n<\/code><\/pre>\nDoing these small changes gets surprisingly far – the new filter shows up in Settings, and also displays on our events page. However, as soon as we try to use the filter in the front end, we get an endless loading spinner icon. Presumably something has gone wrong – the back end is expecting an array of values from multiple checkboxes, whereas we are now supplying it with just one value.<\/p>\n
We’re going to continue tweaking, and see if we can find a solution, but in the meantime, if you had any pointers they would be much appreciated – thanks!<\/p>\n
P.S. – the custom filter is currently on our dev site only, and not the live site where the plugin is registered.<\/p>\n","protected":false},"template":"","class_list":["post-1020851","topic","type-topic","status-closed","hentry"],"yoast_head":"\n
Customisation: 'Day' filter as drop-down list -<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/customisation-day-filter-as-drop-down-list\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Customisation: 'Day' filter as drop-down list -\" \/>\n<meta property=\"og:description\" content=\"We’d like to create our own filter based on the built-in Day filter, but instead of giving the user a list of checkboxes, we want them to select from a drop-down list. We’ve begun by taking a copy of the code in src > Tribe > Filters > Day_Of_Week.php and placing it in our functions.php. […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/customisation-day-filter-as-drop-down-list\/\" \/>\n<meta property=\"article:modified_time\" content=\"2016-02-18T16:30:13+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/customisation-day-filter-as-drop-down-list\/\",\"url\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/customisation-day-filter-as-drop-down-list\/\",\"name\":\"Customisation: 'Day' filter as drop-down list -\",\"isPartOf\":{\"@id\":\"https:\/\/theeventscalendar.com\/support\/#website\"},\"datePublished\":\"2015-11-02T17:19:45+00:00\",\"dateModified\":\"2016-02-18T16:30:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/customisation-day-filter-as-drop-down-list\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/customisation-day-filter-as-drop-down-list\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/customisation-day-filter-as-drop-down-list\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/theeventscalendar.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Topics\",\"item\":\"https:\/\/theeventscalendar.com\/support\/topics\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Calendar Products\",\"item\":\"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Community Events\",\"item\":\"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/community-events\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Customisation: 'Day' filter as drop-down list\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/#website\",\"url\":\"https:\/\/theeventscalendar.com\/support\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/theeventscalendar.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Customisation: 'Day' filter as drop-down list -","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/customisation-day-filter-as-drop-down-list\/","og_locale":"en_US","og_type":"article","og_title":"Customisation: 'Day' filter as drop-down list -","og_description":"We’d like to create our own filter based on the built-in Day filter, but instead of giving the user a list of checkboxes, we want them to select from a drop-down list. We’ve begun by taking a copy of the code in src > Tribe > Filters > Day_Of_Week.php and placing it in our functions.php. […]","og_url":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/customisation-day-filter-as-drop-down-list\/","article_modified_time":"2016-02-18T16:30:13+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/customisation-day-filter-as-drop-down-list\/","url":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/customisation-day-filter-as-drop-down-list\/","name":"Customisation: 'Day' filter as drop-down list -","isPartOf":{"@id":"https:\/\/theeventscalendar.com\/support\/#website"},"datePublished":"2015-11-02T17:19:45+00:00","dateModified":"2016-02-18T16:30:13+00:00","breadcrumb":{"@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/customisation-day-filter-as-drop-down-list\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/theeventscalendar.com\/support\/forums\/topic\/customisation-day-filter-as-drop-down-list\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/customisation-day-filter-as-drop-down-list\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/theeventscalendar.com\/support\/"},{"@type":"ListItem","position":2,"name":"Topics","item":"https:\/\/theeventscalendar.com\/support\/topics\/"},{"@type":"ListItem","position":3,"name":"Calendar Products","item":"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/"},{"@type":"ListItem","position":4,"name":"Community Events","item":"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/community-events\/"},{"@type":"ListItem","position":5,"name":"Customisation: 'Day' filter as drop-down list"}]},{"@type":"WebSite","@id":"https:\/\/theeventscalendar.com\/support\/#website","url":"https:\/\/theeventscalendar.com\/support\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/theeventscalendar.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic\/1020851","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":1,"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic\/1020851\/revisions"}],"predecessor-version":[{"id":1020852,"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic\/1020851\/revisions\/1020852"}],"wp:attachment":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/media?parent=1020851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}