How to add a Custom Search Form in your Post in WordPress

by Yuvi - February 20, 2021

Custom Search Form in your Post in WordPress

Adding a search form in your website is a good idea and it helps visitors to find out the required content easily from your site.

In WordPress there are many ways you can add search form in your post or page.

Here we will discuss mainly 3 methods to achieve it.

1. WordPress inbuilt function.
2. Creating a Shortcode to add search form
3. Adding Search form using custom form codes

Method 1: WordPress inbuilt function

For adding a default search form in your post or custom theme you can use a very simple function of WordPress to add search form and it is  <?php get_search_form(); ?> .

Add it in your page template and after adding this function you will see a default search form in your post/page.

It need some basic knowledge of html, need to add it in post/page template.

Method 2: Creating a Shortcode to add search form

For creating a shortcode for search form , just add these codes in function file of your active theme.

function yuvisearchform( $form ) {

$form = '<form role="search" method="get" id="yusearchform" action="' . home_url( '/' ) . '" >
<div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
<input type="text" value="' . get_search_query() . '" name="s"/>
<input type="submit" id="yusearchsubmit" value="'. esc_attr__('Search') .'" />
</div>
</form>';

return $form;

}
add_shortcode('yuvisearch', 'yuvisearchform');

after adding these forms you can use shortcode [yuvisearch] to add search form.

Method 3: Adding Search form using custom form codes

Add these html codes in your theme where you want to add this search form

<form class="input-group p-0 .d-none .d-lg-block col-12 my-2" role="search" method="get" action="<?php echo home_url( '/' ) ?>" >
<input type="text" class="form-control py-4" placeholder="Search" value="<?php echo get_search_query();?>" name="s">
<div class="input-group-append">
<button type="submit" class="btn btn-warning" type="button">Search</button>
</div>
</form>

These codes will create a very nice search form to use.

Hope this will help to add a search form in your WordPress website.