Adding Search Box in your site

Search box is an important aspect for a site. WordPress generally provides a default Search Box widget with its package which you can use in any Widget area by going to Appearance > Widgets and Drag the Search Widget from the Available Widgets section to any widget based area provided by your Theme.

But sometimes a situation comes where you want to add a search box in a default place but there is no option there for that. Mostly in some themes like in header, footer where there is no widgets provided by theme.

Don't worry about that. You can add your search box any where you want by editing the core files to get the look of your site what you think with the Search box. But first of all make sure you are using a Child Theme for this so that you won't lose any customization when you update your theme in future.

There are generally 2 methods you can add search box in your site. 

i)  By adding the code directly in the theme files.

ii) By adding shortcode.

By adding the code directly in the theme files.

 

If you want to add your buttons directly into a specific field like header, footer, category page, blog page (which files you can find directly in the theme files) then you can directly add the complete code there by editing the theme file in a Child Theme. 

First of all please locate the place where you want to add the search box in theme files and then edit the theme file by going to Appearance > Editor and edit the required file where you want to add the Search box and locate the place for adding.

Then you need to add the code there and save the changes:

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
 <label>
  <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
  <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
 </label>
 <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
</form>

 

By adding shortcode.

 

If you need to add Search box in specific Page/Post, then you need to add a shortcode for that. For achieving that you need to go to your functions.php by going to Appearance > Editor and at the very bottom you need to add this below code above the ?> tag:

add_shortcode('wpbsearch', 'get_search_form');

Then you need to go to your specific pages/post and add the short code in the page/post editor directly like this:

[wpbsearch]

Then you need to add style to your search box as per your requirement and enjoy with your search box.

For more details please refer: Codex