Pawan Kumawat

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() {
    <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 class="search-form-row">
            <label for="search-category">Category:</label>
            $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,
        <div class="search-form-row">
            <button type="submit" class="search-submit">Search</button>
    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.



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.

Share This On :

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Request A Quote