WordPress Search Form with Keyword and Custom Taxonomy Filters

Learn how to build a custom WordPress search form with both a keyword input field and a custom taxonomy filter. This guide walks through the process of creating the form, modifying the query, and applying filters using the pre_get_posts action hook.

Step 1: Create the Custom Search Form

First, we’ll create a shortcode for the search form that includes both a keyword input and a dropdown for the custom taxonomy filter.

function custom_search_form_shortcode() {
    ob_start();
    ?>
    <form role="search" method="get" class="search-form" action="<?php echo esc_url(home_url('/')); ?>">
        <div class="search-form-row">
            <label for="search-keyword">Search Keyword:</label>
            <input type="text" id="search-keyword" name="s" placeholder="Enter your keyword..." value="<?php echo get_search_query(); ?>" />
        </div>
        <div class="search-form-row">
            <label for="search-taxonomy">Filter by Custom Taxonomy:</label>
            <?php
            $taxonomy = 'your_custom_taxonomy'; // Replace this with your actual taxonomy name
            $terms = get_terms($taxonomy, array('hide_empty' => false));
            ?>
            <select name="custom_taxonomy" id="search-taxonomy">
                <option value="">All <?php echo $taxonomy; ?> Terms</option>
                <?php foreach ($terms as $term) : ?>
                    <option value="<?php echo esc_attr($term->slug); ?>" <?php selected($term->slug, get_query_var('custom_taxonomy')); ?>>
                        <?php echo esc_html($term->name); ?>
                    </option>
                <?php endforeach; ?>
            </select>
        </div>
        <div class="search-form-row">
            <button type="submit" class="search-submit">Search</button>
        </div>
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('custom_search_form', 'custom_search_form_shortcode');

 

With this code, you’ve created a simple search form that includes fields for a keyword search and a custom taxonomy filter. The form can now be placed anywhere using the shortcode [custom_search_form].

 

Step 2: Modify the Query Using pre_get_posts

To filter search results based on the keyword and taxonomy selected, we need to modify the query using the pre_get_posts hook.

 

function custom_search_pre_get_posts($query) {
    if (is_admin() || !$query->is_main_query()) {
        return;
    }

    if ($query->is_search()) {
        // Keyword search modification
        if (!empty($_GET['s'])) {
            $query->set('s', sanitize_text_field($_GET['s']));
        }

        // Custom taxonomy filter
        $taxonomy = 'your_custom_taxonomy'; // Replace with your actual taxonomy name
        if (!empty($_GET['custom_taxonomy'])) {
            $query->set('tax_query', array(
                array(
                    'taxonomy' => $taxonomy,
                    'field' => 'slug',
                    'terms' => sanitize_text_field($_GET['custom_taxonomy']),
                ),
            ));
        }
    }
}
add_action('pre_get_posts', 'custom_search_pre_get_posts');

 

This function checks if the search query is active and then modifies it to include the custom taxonomy filter, allowing results to be filtered accordingly. The keyword filter is applied automatically using the s parameter in the query.

 

Step 3: Add Custom CSS Styles

To improve the appearance of the search form, you can add the following CSS styles to your theme’s style.css file:

.search-form {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.search-form-row {
    margin-bottom: 12px;
}

.search-form label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

.search-form input[type="text"],
.search-form select {
    padding: 8px;
    width: 250px;
}

.search-form .search-submit {
    padding: 8px 20px;
    background-color: #0073aa;
    color: #fff;
    border: none;
    cursor: pointer;
}

.search-form .search-submit:hover {
    background-color: #005a88;
}

 

This CSS will make the search form more visually appealing by ensuring consistent styling and responsiveness. You can further customize these styles based on your theme’s needs.

 

Step 4: Using the Shortcode

Now that you’ve created and customized your search form, you can display it on any post, page, or widget by adding the following shortcode:

[custom_search_form]

This shortcode will render the search form, allowing users to search by keyword and filter results by the custom taxonomy you’ve set up. Be sure to replace 'your_custom_taxonomy' with your actual taxonomy name in both the form and the query modification steps.

 

Additional Resources

To better understand custom taxonomies and their use in WordPress, you may find these resources helpful:

• Register Custom Taxonomy in WordPress
• Using pre_get_posts Hook in WordPress
• How to Create Custom WordPress Search Forms

These resources will help you further customize and extend your WordPress search forms, and provide additional examples and best practices for using custom taxonomies and modifying queries.