How to Add a Search Toggle Effect in WordPress

http://www.wpbeginner.com/wp-themes/how-to-add-a-search-toggle-effect-in-wordpress/

Displaying WordPress Search Form

WordPress adds default CSS classes to HTML generated by various template tags inside a theme. WordPress themes use <?php get_search_form(); ?> template tag to display search form. It can output two different search forms, one for HTML4 themes and one for themes with HTML5 support. If your theme has add_theme_support('html5', array('search-form')) line in functions.php file, then this template tag will output an HTML5 search form. Otherwise, it will output HTML4 search form.

Another way to find out what form your theme generates, is to look at the search form source code.

This is the form get_search_form() template tag will display when your theme does not have HTML5 support:
1   <form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
2       <div><label class="screen-reader-text" for="s">Search for:</label>
3           <input type="text" value="" name="s" id="s" />
4           <input type="submit" id="searchsubmit" value="Search" />
5       </div>
6   </form>

And this is the form it will generate for a theme with HTML5 support.
1   <form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
2       <label>
3           <span class="screen-reader-text">Search for:</span>
4           <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
5       </label>
6       <input type="submit" class="search-submit" value="Search" />
7   </form>

For the sake of this tutorial, we will use the HTML5 search form. If your theme generates HTML4 search form, then add this line of code in your theme’s functions.php file:
1   add_theme_support('html5', array('search-form'));

Once you have made sure that your search form is generating HTML5 form, the next step is to place the search form where you want to display it with the toggle effect.
Adding the Toggle Effect to the WordPress Search Form

First thing you will need is a search icon. The default Twenty Thirteen theme in WordPress comes with a very nice little icon, and we will be using that in our tutorial. However, feel free to create your own in Photoshop or download one from the web. Just make sure that the file is named search-icon.png.

Now you need to upload this search icon to your theme’s images folder. Connect to your website using an FTP client like Filezilla, and open your theme directory.

Now this is the final and most crucial step. You need to add this CSS to your theme’s stylesheet:
01  .site-header .search-form {
02      position: absolute;
03      right: 200px;
04      top: 200px;
05  }
06
07  .site-header .search-field {
08      background-color: transparent;
09      background-image: url(images/search-icon.png);
10      background-position: 5px center;
11      background-repeat: no-repeat;
12      background-size: 24px 24px;
13      border: none;
14      cursor: pointer;
15      height: 37px;
16      margin: 3px 0;
17      padding: 0 0 0 34px;
18      position: relative;
19      -webkit-transition: width 400ms ease, background 400ms ease;
20      transition:         width 400ms ease, background 400ms ease;
21      width: 0;
22  }
23
24  .site-header .search-field:focus {
25      background-color: #fff;
26      border: 2px solid #c3c0ab;
27      cursor: text;
28      outline: 0;
29      width: 230px;
30  }
31  .search-form
32  .search-submit {
33  display:none;
34  }

The important thing to note about this CSS, is the CSS3 transition effects which allows us to create the toggle effect with ease. Also note that you will still have to adjust the positioning of the search icon and form according to your theme’s layout