Add Snippet To Project
Navigating through a sea of content can be overwhelming for your viewers, but with an effective categorization and a smooth search method, things can be a lot easier. One such method is the utilization of a search category dropdown – a tool that can greatly enhance the user-friendliness of your website. In this article, we will guide you through the process of creating and integrating a search category dropdown in your WordPress website. This will make it easier for your viewers to find the specific content they are looking for, ultimately improving their overall user experience on your site.
function wpturbo_category_dropdown_search_form() {
$categories = get_categories();
?>
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div>
<label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" />
<select name="category" id="category">
<option value="0">All Categories</option>
<?php foreach ( $categories as $category ) : ?>
<option value="<?php echo $category->term_id; ?>">
<?php echo $category->name; ?>
</option>
<?php endforeach; ?>
</select>
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
<?php
}
add_shortcode('wpturbo_category_dropdown_search', 'wpturbo_category_dropdown_search_form');
```
This code snippet creates a search form with a dropdown where each option represents a category. You can use the shortcode [wpturbo_category_dropdown_search] to place it anywhere on your WordPress site.
The provided code starts by defining a new function named wpturbo_category_dropdown_search_form(). This function will be responsible for creating the search form that includes a dropdown menu with all the existing categories.
Let's dissect this function:
Firstly, the function calls get_categories(), a built-in WordPress function that retrieves all the categories for this particular WordPress installation. This function's returned value is stored in the $categories variable.
$categories = get_categories();Subsequently, we design the form itself contained within the <form> HTML tags. The action attribute of the form is set to our site's base URL (home_url( '/' )), which means the form will send the user's search query to our site's search page (/search). The method attribute is set to GET, which is the HTTP method used to retrieve data.
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
...
</form>Inside the form, an input text field is created for the user's search query, followed by the dropdown menu for category selection. A submit button is added for users to submit the form.
The dropdown menu (<select> element) has its name attribute set as category. Inside the dropdown menu, an <option> element for each category is added using a foreach loop on the $categories array.
<select name="category" id="category">
<option value="0">All Categories</option>
<?php foreach ( $categories as $category ) : ?>
<option value="<?php echo $category->term_id; ?>">
<?php echo $category->name; ?>
</option>
<?php endforeach; ?>
</select>Each <option> element's value attribute is set to the particular category's term_id and the displayed text for this option is set to the category’s name.
Lastly, the function wpturbo_category_dropdown_search_form() is hooked to a shortcode named wpturbo_category_dropdown_search using the add_shortcode() function. This allows you to use the [wpturbo_category_dropdown_search] shortcode in your pages or templates to embed the search form with the category dropdown.
add_shortcode('wpturbo_category_dropdown_search', 'wpturbo_category_dropdown_search_form');