If you are converting a HTML website into WordPress or you have liked a nice search form and want to integrate that into your WordPress site, so this tutorial is for you. There is nothing complex in this conversion. we need to tweak the attribute a bit and it will start working.
Below is the simple HTML search form code and we will integrate it into WordPress.
<div class="search__box"> <input type="search" id="mywebsitesearch" class="form-control" placeholder="Search for post, page, etc."/> <button type="submit" class="btn-search">Search</button> </div>
the above code is a simple bootstrap form, we can easily turn this into a WordPress search box inside any page of a theme. To do that, we need to add name attribute to the form, and the value should be s . lets see how it will work. The id should be given any name, anything you want to call in css to style the form.
<div class="search__box"> <input type="search" id="mywebsitesearch" name="s" class="form-control" placeholder="Search for post, page, etc."/> <button type="submit" class="btn-search">Search</button> </div>
So, just adding the name attribute is enough to make it a functional WordPress search from.
For WooCommerce
If you want to search the woocomemrce products, then you need to add another line to the form to get it work. We need to include a hidden input type to search the WooCommerce products. here it is:
<input type="hidden" name="post_type" value="product" />
Just need to add this line before the search button and it will search the products. So the complete form is:
<div class="search__box"> <input type="search" id="search-market" class="form-control" value="<?php get_search_query() ?>" name="s" id="s" placeholder="<?php esc_html_e( 'Search for brand, model, etc.', 'woocommerce' ) ?>" /> <input type="hidden" name="post_type" value="product" /> <button type="submit" class="btn-search" id="searchsubmit" />Search</button> </div>
Isn’t it easy? I think this is very handy. You can do it in minutes while converting a html form into a functional WordPress search form. Let me know if you have any question on this.