How to Add a Keyword + Category Filter in WordPress Search

Build a Custom Search Form with Keyword and Category Filters

Want better search functionality on your WordPress site? This tutorial shows how to create a simple shortcode for a search form that includes a keyword field and a category selector.

Step 1: Define the Search Form Function

Use the code below to generate a form with both a keyword input and a category dropdown. Add it to your theme’s functions.php file or a custom plugin.

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">Keyword:</label>
            <input type="text" id="search-keyword" name="s" placeholder="Enter keyword..." value="<?php echo get_search_query(); ?>" />
        </div>
        <div class="search-form-row">
            <label for="search-category">Category:</label>
            <?php
            $args = array(
                'show_option_all' => 'All Categories',
                'taxonomy' => 'category',
                'name' => 'cat',
                'id' => 'search-category',
                'orderby' => 'name',
                'class' => 'postform',
                'hierarchical' => true,
                'depth' => 2,
                'hide_empty' => false,
            );
            wp_dropdown_categories($args);
            ?>
        </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');

Step 2: Style the Search Form

Add this CSS to your theme’s stylesheet for a clean look:

.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 20px 0;
}

.search-form label {
    font-weight: 600;
}

.search-form input[type="text"],
.search-form select {
    width: 100%;
    max-width: 320px;
    padding: 10px;
    border: 1px solid #ccc;
}

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

.search-form .search-submit:hover {
    background: #005177;
}

Step 3: Use It with a Shortcode

Now just add the shortcode [custom_search_form] wherever you want your search form to appear. It works inside posts, pages, or widgets.

Summary

This technique improves your site’s search by offering both keyword and category filters. Ideal for blogs, news portals, or niche content directories.

Conclusion

With this method, you can improve your WordPress site’s search functionality using a clean and user-friendly form. Customize the design or logic to better suit your site’s needs.

Related External Links

• wp_dropdown_categories Documentation
• get_search_query Documentation
• add_shortcode Documentation
• Smashing Magazine on Meta Boxes