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() {
    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.

Categories

Related Blogs

How to add ACF options pages and options sub page

To add Advanced Custom Fields (ACF) options pages and options sub-pages, you’ll need to have ACF Pro installed and activated on your WordPress site. ACF Pro allows you to create custom options pages where you can add settings, fields, and other configuration data.

Elementor shortcodes

Elementor is a popular page builder plugin for WordPress that allows you to create and customize web pages using a drag-and-drop interface. Elementor provides a wide range of built-in widgets and elements, and you can also create your own custom elements using shortcodes.

WooCommerce: Check if Product ID is in the Cart

To check if a specific product ID is in the cart in WooCommerce, you can use the `woocommerce_before_cart` action hook, which is fired before the cart page is displayed. Here’s how you can achieve this:

Convert PHP Array into JavaScript Array.

To convert both a normal PHP array, a multidimensional PHP array, and a nested PHP array into JavaScript arrays, you can use JSON encoding and decoding as previously explained. JSON is well-suited for handling various data structures, including both simple arrays and complex nested arrays.