Search form extra fields

This tutorial shows how to add custom taxonomy selection field and guests selection field into the search form. Next PHP code example could be placed in your child theme functions.php:

 add_filter( 'babe_search_form_after_date_fields', 'wpbabe_search_form_add_guests', 10 );
/**
 * Adds guests select field into the search form.
 * 
 * @param string $content
 * 
 * @return string
 */
function wpbabe_search_form_add_guests( $content ) {
			
    $ages_arr = BABE_Post_types::get_ages_arr();
            
    if (empty($ages_arr)){
        $ages_arr[0] = array(
           'name' => 'Guests',
           'description' => '',
        ;
    }
            
    $max_guests = BABE_Settings::$settings['max_guests_select'];
            
    foreach ($ages_arr as $age_id => $age_term){
                
        $selected_value = isset( $_GET['guests'][$age_id] ) ? absint( $_GET['guests'][$age_id] ) : 0;
                
        $field_title = $age_term['name'] ? '<div class="input_select_title_value">'. $age_term['name'].'</div>' : '';
                
        $content .= '
	<div class="search_guests_block input_select_field">
	  <div class="input_select_title">
            ' . $field_title . '
            <div class="input_select_wrapper">
               <input type="text" id="age_'.$age_id.'" class="input_select_input input_select_input_value select_guests" name="guests['.$age_id.']" value="'.$selected_value.'">
               <ul class="input_select_list">
                  '.BABE_html::get_range_input_select_options(0, $max_guests, 1, $selected_value).'
               </ul>
               <i class="fas fa-chevron-down"></i>
             </div>
           </div>
	</div>';
           
    return $content;
}

 add_filter( 'babe_search_form_after_date_fields', 'wpbabe_search_form_add_taxonomy', 20 );
/**
 * Adds taxonomy select field to the search form.
 * 
 * @param string $content
 * 
 * @return string
 */
 function wpbabe_search_form_add_taxonomy( $content ) {
			
	global $post;
	$add_input_field = 'ba-destination'; /// change it to your taxonomy
			
	$selected = isset( $_GET['add_ids_'.$add_input_field]) ? intval( $_GET['add_ids_'.$add_input_field] ) : 0;
				
	$taxonomy = get_taxonomy( $add_input_field );
				
	if ( ! empty( $taxonomy ) ) {
				    
            $selected_term_name = $taxonomy->labels->all_items;
            $selected_value = '';
                  
            if ($selected){    
               $selected_term = get_term_by('id', $selected, $add_input_field);
               if (!empty($selected_term) && !is_wp_error($selected_term)){
                   $selected_term_name = $selected_term->name;
                   $selected_value = $selected;
               }    
             }
                  
             $args = array(
                     'taxonomy' => $add_input_field,
                     'parent_term_id' => 0,
                     'view' => 'list',
                     'add_count' => '',
                     'option_all' => 1,
                     'option_all_value' => 0,
                     'option_all_title' => $taxonomy->labels->all_items,
                     'id' => 'add_ids_list_'.$add_input_field,
                     'class' => 'add_ids_list',
                     'class_item' => 'term_item',
                     'class_item_selected' => 'term_item_selected',
                     'name' => '',
                     'prefix_char' => ' ',
                     'term_id_name' => 'term_id',
              );
	      
              $content .= '<div class="add_input_field" data-tax="'.$add_input_field.'">
		<div class="add_ids_title"><div class="add_ids_title_value">' . $selected_term_name . '</div><i class="fas fa-chevron-down"></i></div>
                            ' . BABE_Post_types::get_terms_children_hierarchy( $args, array($selected) ) . '
                            <input type="hidden" name="add_ids_'.$add_input_field.'" value="'.$selected.'">	
						</div>
			     ';
       }
			
       return $content;
 }

add_filter( 'babe_search_result_args', 'wpbabe_search_result_args', 10 );
/**
 * Get extra arg from the search form
 * 
 * @param array $args
 * 
 * @return array
 */
function wpbabe_search_result_args( $args ) {
		  
    $add_input_field = 'ba-destination'; /// change it to your taxonomy
            
    $selected = isset( $_GET['add_ids_'.$add_input_field] ) && absint($_GET['add_ids_'.$add_input_field]) ? absint($_GET['add_ids_'.$add_input_field]) : '';
			
    $selected_arr = $selected ? (array)$selected : array();
    $selected_arr = array_map( 'absint', $selected_arr );
    $args['terms'] = $args['terms'] + $selected_arr;
            
    if (isset( $_GET['guests'] )){
        $guests = array_map('absint', $_GET['guests']);
        $args['guests'] = array_sum($guests);
     }
			
     return $args;
 }

To make new taxonomy field expandable, use next snippet in your child theme javascript file:

$('.add_input_field .add_ids_title').on('click', function(event){
        event.preventDefault();
        search_add_input_toggle(this);
    });
    
    $('.add_input_field .add_ids_list .term_item').on('click', function(event){
        event.preventDefault();
        var parent = $(this).parent();
        search_add_input_toggle(parent);
        var selected = $(this).data('id');
        $(parent).parent().find('input[name="add_ids_'+$(parent).parent().data('tax')+'"]').val(selected);
        $(parent).find('.term_item').removeClass('term_item_selected');
        $(this).addClass('term_item_selected');
        $(parent).parent().find('.add_ids_title_value').html($(this).html());
    });
    
    function search_add_input_toggle(item){
        $(item).parent().find('.add_ids_list').toggleClass('active');
        $(item).parent().find('.add_ids_title i').toggleClass('fa-chevron-down');
        $(item).parent().find('.add_ids_title i').toggleClass('fa-chevron-up');
    }
    
    function search_add_input_close(item){
        $(item).find('.add_ids_list').removeClass('active');
        $(item).find('.add_ids_title i').addClass('fa-chevron-down');
        $(item).find('.add_ids_title i').removeClass('fa-chevron-up');
    }
    
    $(document).on('click', function(event){
         var par = $(event.target).closest('.add_input_field');
         if (par.length){
            $(par).siblings().each(function(el){
                search_add_input_close(this);
            });
         } else {
            $(document).find('.add_input_field .add_ids_list.active').parents().eq(2).each(function(el){
                search_add_input_close(this);
            });
         }
    });

Cookies

This site uses cookies to enhance your user experience and analyse traffic to improve this website. By clicking any link on this page you are giving your consent for us to set cookies. Please, see our Privacy Policy for additional information.
Scroll to top