How to Create a Custom Advanced Search form And Result Page in WordPress

If you want to create a advance search with post title, post content , post category and location. follow below steps.

1) Put this code anywhere in your theme’s functions.php

// Add Location Taxonomy for post
function ab_custom_location_taxonomy() {
 
  $labels = array(
    'name' => _x( 'location', 'taxonomy general name' ),
    'singular_name' => _x( 'location', 'taxonomy singular name' ),
    'search_items' =>  __( 'Search location' ),
    'all_items' => __( 'All location' ),
    'parent_item' => __( 'Parent location' ),
    'parent_item_colon' => __( 'Parent location:' ),
    'edit_item' => __( 'Edit location' ), 
    'update_item' => __( 'Update location' ),
    'add_new_item' => __( 'Add New location' ),
    'new_item_name' => __( 'New location' ),
    'menu_name' => __( 'Location' ),
  );    
 
// Now register the taxonomy
  register_taxonomy('location', array('post'), array(
    'hierarchical' => true,
    'labels' => $labels,
    'show_ui' => true,
    'show_in_rest' => false,
    'show_admin_column' => true,
    'query_var' => true,
    'rewrite' => array( 'slug' => 'location' ),
  ));
 
}
add_action( 'init', 'ab_custom_location_taxonomy', 1 );

// Allow custom GET parameters
add_filter('query_vars', function($vars) {
    $vars[] = 'post-search';
    $vars[] = 'post-category';
    $vars[] = 'post-location';
    return $vars;
});

3) Let’s create a php file for serch form and serch result. Example : advanced-search.php

NOTE: I’m using bootstrap library to setup html structure. you can use your own html code.

<?php get_header(); ?>

<section class="search-sec">

    <div class="container">
        <?php 

        // Store variables
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        $search_string = get_query_var('post-search');
        $category = get_query_var('post-category');
        $location = get_query_var('post-location');

        // Search form
        global $post;
        ?>
        <form method="GET" action="<?php echo get_permalink($post->ID); ?>">
            <div class="row">
                <div class="col-lg-12">
                    <div class="row">
                        <div class="col-lg-3 col-md-3 col-sm-12 p-0">
                            <input type="text" class="form-control search-slt" id="post-search" name="post-search" value="<?php echo $search_string; ?>" />
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-12 p-0">
                            <?php 
                              wp_dropdown_categories([
                                'taxonomy' => 'category',
                                'name' => 'post-category',
                                'id' => 'post-category',
                                'class' => 'form-control search-slt',
                                'value_field' => 'slug',
                                'selected' => $category,
                                'show_option_none' => __('Any genre', 'ab'),
                                'option_none_value' => '',
                                'hierarchical' => true,
                                'hide_if_empty' => false,
                              ]);
                              ?>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-12 p-0">
                            <?php 
                              wp_dropdown_categories([
                                'taxonomy' => 'location',
                                'name' => 'post-location',
                                'id' => 'post-location',
                                'class' => 'form-control search-slt',
                                'value_field' => 'slug',
                                'selected' => $location,
                                'show_option_none' => __('Any genre', 'ab'),
                                'option_none_value' => '',
                                'hierarchical' => true,
                                'hide_if_empty' => false,
                              ]);
                              ?>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-12 p-0">
                            <input type="submit" class="btn btn-danger wrn-btn" value="<?php _e('Search', 'txtdomain'); ?>" />
                        </div>
                    </div>
                </div>
            </div>
        </form>

    </div>
</section>

<section class="search-result">
    <div class="container">
        <?php
                        
            // Reset wp_query temporary
            $tmp_wpquery = $wp_query;
            $wp_query = null;
            
            // Start setting up custom CPT query
            $args = [
                'post_type' => 'post',
                'posts_per_page' => 3,
                'paged' => $paged
            ];
            
            $meta_query = [];
            $tax_query = [];
            
            // Search post title and content
            if (!empty($search_string)) {
                $args['s'] = $search_string;
            }
            
            // Search by category
            if (!empty($category)) {
                $tax_query[] = [
                    'taxonomy' => 'category',
                    'field' => 'slug',
                    'terms' => $category
                ];
            }

            // Search by location
            if (!empty($location)) {
                $tax_query[] = [
                    'taxonomy' => 'location',
                    'field' => 'slug',
                    'terms' => $location
                ];
            }
            
            
            // Add to query arguments
            if (!empty($meta_query)) {
                $args['meta_query'] = $meta_query;
            }
            if (!empty($tax_query)) {
                $args['tax_query'] = $tax_query;
            }
            
            // Perform query and assign it to wp_query
            $posts = new WP_Query($args);
            $wp_query = $posts;
        
            if (have_posts()) { ?>
        <div class="row">

            <?php while (have_posts()) : the_post(); ?>
            <div class="col-md-12">
                <div class="post">
                   <h3><?php the_title(); ?></h3> 
                </div>
                
            </div>
            <?php endwhile; ?>

            <div class="pagination">
                <?php
                the_posts_pagination([
                    'mid_size' => 2,
                    'prev_text' => __('« Previous', 'ab'),
                    'next_text' => __('Next »', 'ab')
                ]);
                ?>
            </div>

        </div>
        <?php } else { ?>
        <div class="row">
            <p class="no-posts"><?php _e('No books found.', 'ab'); ?></p>
        </div>
        <?php }
 
        // Reset wp_query back to what it was
        $wp_query = null;
        $wp_query = $tmp_wpquery;
        ?>

    </div>
</section>


<?php get_footer(); ?>

3) Copy below css code and paste into your css file

/*search box css start here*/
    .search-sec{
        padding: 2rem;
    }
    .search-slt{
        display: block;
        width: 100%;
        font-size: 0.875rem;
        line-height: 1.5;
        color: #55595c;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        height: calc(3rem + 2px) !important;
        border-radius:0;
    }
    .wrn-btn{
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        text-transform: capitalize;
        height: calc(3rem + 2px) !important;
        border-radius:0;
    }
    .search-result {
        width: 100%;
        padding: 2rem;
        background: #efefef;
    }
    .search-result .post {
        box-shadow: 0px 0px 8px 1px #cacaca;
        background: #fff;
        padding: 10px;
        margin: 8px 0;
    }
    @media (min-width: 992px){
        .search-sec{
            position: relative;
            /*top: -114px;*/
            background: rgba(26, 70, 104, 0.51);
        }
    }

    @media (max-width: 992px){
        .search-sec{
            background: #1A4668;
        }
    }

Leave a Reply

Your email address will not be published.