How to correctly submit a search form and display the result in an independent page

To create your own independent search functionality, follow these steps.

1- You need a form to send the data for you. This is a simple form that can do this for you:

<form method="post" name="car-select" action="<?php echo site_url('/my-page/'); ?>">
    <select name="make">
        <option value="benz">Benz</option>
        <option value="bmw">BMW</option>
        <option value="audi">Audi</option>
    </select>
    <select name="type">
        <option value="sedan">Sedan</option>
        <option value="coupe">Coupe</option>
    </select>
    <input type="submit" value="Find my dream car!"/>
</form>

Which /my-page/ is the slug for the page we are going to create later.

2- A function to handle the search results. Take a look at this basic function that searches the cars based on the entered values:

function my_custom_search() {
    $car_make = $_POST['make'];
    $car_type = $_POST['type'];
    $car_query = new WP_Query ( array (
        'post_type' => 'post',
        'tax_query' => array(
            'relation' => 'AND',
            array (
                'taxonomy' => 'car_make',
                'field' => 'slug',
                'terms' => $car_make,
            ),
            array (
                'taxonomy' => 'car_type',
                'field' => 'slug',
                'terms' => $car_type,
            ),
         ),
    ));
    if ($car_query->have_posts) {
        while($car_query->have_posts()){
            $car_query->the_post();
            get_template_part('WHATEVER TEMPLATE YOU WANT TO USE');
        }
    }
    // Pagination goes here
}

3- A page to show your search results. Remember the slug in the first requirement? Create a page in your template’s directory and name it like page-my-search-template.php. Then include this function in your new page template, wherever you wish:

my_custom_search();

You should then create a page with my-page slug (the one in the form’s action), using the template you just made.

Now, every submission of the form will trigger a search query and display the results in your very own search template!

WAIT !! I want my pagination !!

You can implement your own pagination in the search function, however i recommend using WP-PageNavi for those who don’t have enough skill to write a pagination script. Install the plugin, and set the query like this:

wp_pagenavi(array( 'query' => $car_query ));

This way you have a pagination for your custom search page, nice and easy.

Leave a Comment