Search Form With Keyword And Category Fields In WordPress

To create a shortcode for a search form with keyword and category fields in WordPress, follow the steps below:

**Step 1: Create a Custom Function for the Search Form**
Start by creating a custom function that generates the search form HTML with the keyword and category fields.

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: Add CSS Styles (Optional)**
You can add custom CSS styles to make the search form visually appealing. Add the following styles to your theme’s style.css file or your custom CSS file.

.search-form {
    display: flex;
    flex-wrap: wrap;
}

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

.search-form label {
    display: block;
    font-weight: bold;
}

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

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

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

**Step 3: Use the Shortcode**
Now, you can use the `[custom_search_form]` shortcode in your WordPress posts, pages, or widgets to display the search form.

[custom_search_form]

The shortcode will render a search form with a keyword input field, a category dropdown, and a “Search” button. Users can enter search terms and select a category to perform a search on your WordPress site.

Remember to customize the shortcode and CSS styles according to your theme’s design and requirements.