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, you need to 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 with a keyword input field and a category dropdown. The form submits the search query to the WordPress search results page, where the results are filtered by both the keyword and selected category.

 

Step 2: Add CSS Styles (Optional)

You can customize the appearance of the search form by adding some CSS styles. Below is an example of how to style the form to make it look more appealing. Add these styles to your theme’s style.css or a custom CSS file.

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

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

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

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

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

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

 

This CSS styling will make the form responsive and easy to use. You can adjust the width of the inputs and buttons as per your site’s design needs.

Step 3: Use the Shortcode

Once you have added the above code, you can use the [custom_search_form] shortcode anywhere on your WordPress site—whether in a post, page, or widget. Just paste the shortcode into the content editor where you want the form to appear.

[custom_search_form]

This will render the search form on your site, allowing users to enter a keyword and select a category to filter their search results.

 

Conclusion

With these steps, you can easily create a custom search form in WordPress that lets users search by both keyword and category. Feel free to modify the code and styling to better match the design of your site.

 

Related External Links

• WordPress wp_dropdown_categories function documentation
• WordPress get_search_query function documentation
• WordPress add_shortcode function documentation
• Smashing Magazine Tutorial on Custom Meta Boxes