Create a custom search form in WordPress using ACF custom fields

 Create a custom search form in WordPress using ACF custom fields

Creating a custom search form is easy and not complicated, and the function of the form is to search and filter simple site content such as categories, custom fields, and tags to improve your site searches that serve visitors.

This tutorial is all about creating custom labels and fields to set up our search form.

How to create a custom search form in WordPress

Let’s say we want to design a new search widget on the site to use, and in the search form we want to enter the following information so that the visitor can filter the search results according to it.

Custom fieldCustom Rates
Price above
Price Below
Living Space
Rooms Number
Cities
Type

Start creating your custom search form by creating your custom post and taxonomy:

First we need to create a custom post type that we learned in the last tutorial, you can still read it here and we need to call the sites of this post type, also we need to create two custom taxonomies we will call them, Cities – – Type – You can also watch how to create a custom taxonomy in WordPress .

Create custom fields using the ACF plugin

You will need to create the custom fields and for that, go to your WordPress dashboard and install the ACF plugin , after that you need to go to the plugin page and start creating some additional custom fields

ACF SEARCH AND FILTER
ACF add-on installation
ACF CUSTOM FIELDS SEARCH AND FILTER
Making custom fields using the ACF plugin

Just make sure the custom files you’ve created contain the same Slug also Type : No..

Create the important files in the theme folder

The next step is to go to your theme folder using cPanel and open create a new folder, theme-search and inside this folder create a new file named mysearch.php

Writing PHP code for the search form

The first code is pasted into mysearch.php

// search and Filter in WordPress
<?php
 $is_search = count( $_GET );


    $type = get_terms([
            'taxonomy' => 'type',
            'hide_empty' => false,
    ]);
 $cities = get_terms([
            'taxonomy' => 'cities',
            'hide_empty' => false,
    ]);
    if($is_search)
    {
        $query = search_query();
    }
?>
 
<section class="page-wrap">
<div class="container">
 
            <form action="<?php echo home_url('/');?>">

  <div class="row form-group  ">
      <div class="col-lg-3"> 
         
                <input
                type="text" 
                name="keyword" 
                placeholder="<?php _e(' Write a keyword ','wpmrj3'); ?> "
                class="form-control"
                value="<?php echo isset($_GET['keyword']) ? $_GET['keyword'] : '';?>"
                > 
</div>
 
         <div class="col-lg-3"> 

               
                <select name="cities" class="form-control">

                        <option value=""><?php _e('Where','wpmrj3'); ?></option>

                        <?php foreach($cities as $cities):?>
                                <option 
                                
                                <?php if(  isset($_GET['cities']) && ( $_GET['cities'] == $cities->slug)  ):?>
                                    selected
                                <?php endif;?>


                                value="<?php echo $cities->slug;?>"><?php echo $cities->name;?></option>
                        <?php endforeach;?>

                </select>
            
            </div>
 <div class="col-lg-3"> 
                
            
                <select name="type" class="form-control">

                        <option value=""><?php _e('Type','wpmrj3'); ?> </option>

                        <?php foreach($type as $type):?>
                                <option 
                                
                                <?php if(  isset($_GET['type']) && ( $_GET['type'] == $type->slug)  ):?>
                                    selected
                                <?php endif;?>


                                value="<?php echo $type->slug;?>"><?php echo $type->name;?></option>
                        <?php endforeach;?>

                </select>
            
  </div>   
 

 
           

                                <div class="col-lg-3">

                                       <label> <?php _e('Price above','wpmrj3'); ?></label>

                                        <select name="price_above" class="form-control">

                                            <?php for($i=0; $i < 210000; $i+=10000):?>    

                                                <option 
                                                
                                                <?php if(  isset($_GET['price_above']) && ( $_GET['price_above'] == $i)  ):?>
                                                    selected
                                                <?php endif;?>
                                                
                                                
                                                value="<?php echo $i;?>">
                                                  <?php echo _e('$  ','wpmrj3') . number_format($i) ;?>
                                                </option>

                                            <?php endfor;?>

                                        </select>

                                </div>
 

                                <div class="col-lg-3">

                                        <label><?php _e('Price Below','wpmrj3'); ?> </label>

                                        <select name="price_below" class="form-control">

                                            <?php for($i=0; $i < 210000; $i+=10000):?>    

                                                <option 
                                                
                                                <?php if(  isset($_GET['price_below']) && ( $_GET['price_below'] == $i)  ):?>
                                                    
                                                    selected

                                                <?php elseif( $i == 200000):?>

                                                    selected

                                                <?php endif;?>
                                                
                                                
                                                value="<?php echo $i;?>">
                                                    <?php echo _e('$  ','wpmrj3') . number_format($i) ;?>
                                                </option>
 
                                            <?php endfor;?>

                                        </select>

                                </div>
                               

                                

                                <div class="col-lg-3">

                                       <label> <?php _e('Living Space ','wpmrj3'); ?></label>

                                        <select name="living-space" class="form-control">

                                              <?php for($i=20; $i < 5000; $i+=100):?>  

                                                <option 
                                                
                                        <?php if(  isset($_GET['living_space']) && ( $_GET['space_above'] == $i)  ):?>
                                                    selected
                                                <?php endif;?>
                                                
                                                
                                                value="<?php echo $i;?>">
                                                <?php echo  ($i) . '   ' ;?>
                                                </option>

                                            <?php endfor;?>

                                        </select>

                                </div>


                                <div class="col-lg-3">

                                       <label> <?php _e(' Rooms Number','wpmrj3'); ?></label>

                                        <select name="Rooms_number" class="form-control">

                                    <?php for($i= 0; $i < 5000; $i+=100):?>    
                                                <option 
                                                
                                       <?php if(  isset($_GET['Rooms_number']) && ( $_GET['space_below'] == $i)  ):?>
                                                    selected
                                                <?php endif;?>
                                                
                                                
                                                value="<?php echo $i;?>">
                                               <?php echo  ($i) . '   ' ;?>
                                                </option>

                                            <?php endfor;?>

                                        </select>

                                </div>
 
            </div>
    <button type="submit" class="btn btn-primary "><?php _e('Search ','wpmrj3'); ?> 
    </button>
            <a class="btn btn-primary " href="<?php echo home_url('/');?>"><?php _e(' Reset','wpmrj3'); ?> </a>

            </form>
</div>
</section>

The second code is pasted into Functions.php

Next, go to the Functions.php file in the site template and start activating the custom search form by pasting this code:

function search_query()
{

    $paged = ( get_query_var('paged')  )  ? get_query_var('paged') : 1; 


    $args = [

        'paged' => $paged,
        'post_type' => array('locations'),
        'posts_per_page' => 2,
        'tax_query' => [],
        'meta_query' => [
                'relation' => 'AND',
         ],

    ];

    if( isset($_GET['keyword']) )
    {

            if(!empty($_GET['keyword']))
            {
                    $args['s'] = sanitize_text_field( $_GET['keyword'] );
            }

    }



    if( isset($_GET['type']) )
    {
        if(!empty($_GET['type']))
        {
            $args['tax_query'][] = [

                    'taxonomy' =>  'type',
                    'field' => 'slug',
                    'terms' => array( sanitize_text_field( $_GET['type'] ) )

            ];
        }
    }
     

    if( isset($_GET['cities']) )
    {
        if(!empty($_GET['cities']))
        {
            $args['tax_query'][] = [

                    'taxonomy' =>  'cities',
                    'field' => 'slug',
                    'terms' => array( sanitize_text_field( $_GET['cities'] ) )

            ];
        }
    }


    if( isset($_GET['price_above']) )
    {
        if(!empty($_GET['price_above']))
        {
                $args['meta_query'][] = array(

                        'key' => 'price',
                        'value' => sanitize_text_field( $_GET['price_above']) ,
                        'type' => 'numeric',
                        'compare' => '>='
                );
        }
    }



    if( isset($_GET['price_below']) )
    {
        if(!empty($_GET['price_below']))
        {
          

            $args['meta_query'][] = array(

                'key' => 'price',
                'value' => sanitize_text_field( $_GET['price_below']) ,
                'type' => 'numeric',
                'compare' => '<='
        );

        }
    }




    if( isset($_GET['living_space']) )
    {
        if(!empty($_GET['living_space']))
        {
                $args['meta_query'][] = array(

                        'key' => 'living_space',
                        'value' => sanitize_text_field( $_GET['living_space']) ,
                        'type' => 'numeric',
                        'compare' => '>='
                );
        }
    }




    if( isset($_GET['Rooms_number']) )
    {
        if(!empty($_GET['Rooms_number']))
        {
                $args['meta_query'][] = array(

                        'key' => 'Rooms_number',
                        'value' => sanitize_text_field( $_GET['Rooms_number']) ,
                        'type' => 'numeric',
                        'compare' => '<='
                );
        }
    }
 
    


    return  new WP_Query($args);



}

The last step is to call the custom search form in WordPress via the shortcode function, this is easy all you need to do is just paste the following code below the code in the Functions.php file

// search and Filter in WordPress
function wpmrj3_search_shortcode( $attr ) {
    ob_start();
    get_template_part('theme-search/mysearch');
    return ob_get_clean();
}
add_shortcode( 'wpmrj3-search', 'wpmrj3_search_shortcode' );

That’s it, you can now start using the search and filter form and give it a new style with your Css.