Search Form With Keyword And Category Fields In WordPress

In WordPress, you can create a custom search form that allows users to filter content by both keywords and categories. This guide will walk you through the process of creating a shortcode for a search form with these fields.  

Step 1: Create a Custom Function for the Search Form

To begin, define a custom function that generates the HTML for the search form. This form will include a keyword input field and a category dropdown.

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');

This function creates a form that lets users search posts by keyword and category. The query goes to the default WordPress search results page.  

Step 2: Add CSS Styles (Optional)

Customize the appearance of the form with CSS. Add the following to your theme’s style.css or a custom CSS plugin:

.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;
}

This styling makes the form responsive and improves its usability across devices.  

Step 3: Use the Shortcode

After adding the above code to your theme or plugin, use the shortcode below in any post, page, or widget area to display the form:

[custom_search_form]

This will render a functional search form where users can search by both keyword and category.  

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