How to add Search Icon with Toggle Effect in WordPress Menus

You might have seen some of the popular websites having a search icon with a nice looking toggle effect. Some of them showing full-screen toggle and some search box toggle. In this tutorial I am sharing you Steps for achieving search box toggle effect with the help of code snippets, the theme am using is Twenty Sixteen. If you would like to browse more popular themes then have  a look at SpiceThemes

Add Search Icon and WordPress Search Form to WordPress Menus

Many themes already have a search icon image or supporting icon libraries, so,  accordingly add search icon. If the theme supports the font-awesome icon library, then, directly use the font-awesome search icon. If you want custom search icon, then, create png icon with photoshop or find the icon image, but, just make sure you use the file name as search-icon.png and upload it to the themes images folder.

Paste the PHP snippet in the functions.php file of your theme, although it is not recommended to directly edit core theme files, instead create a child theme and do the adjustments from there or you can opt for the way I prefer the most, using Code Snippets plugin, create a snippet and activate it.

//Add the give below snippet in themes function.php file
// Or create a snippet using code snippet plugin
//Set theme_location parameter by the menu locations theme offers

add_filter('wp_nav_menu_items', 'add_search_form', 10, 2);

// Display search icon in menus and toggle search form 
function add_search_form($items, $args) {
if( $args->theme_location == 'primary' )
       $items .= '<li class="search"><a class="search_icon"><span class="spicewpsearch_icon"></span></a><div style="display:none;" class="spicewpsearchform">'. get_search_form(false) .'</div></li>';
       return $items;
}

In the snippet, I have used the primary menu location of Twenty Sixteen Theme. Change the value of  theme_location parameter according to the menu location’s theme offers. Make sure you add menus to this location from Appearance >> Menus

Themes Using Font-Awesome Icons

If your theme is already  using font awesome library, then use this PHP snippet

add_filter('wp_nav_menu_items', 'add_search_form', 10, 2);

// Display fontawesome search icon in menus and toggle search form 

function add_search_form($items, $args) {
if( $args->theme_location == 'primary' )
       $items .= '<li class="search"><a class="search_icon"><i class="fa fa-search"></i></a><div style="display:none;" class="spicewpsearchform">'. get_search_form(false) .'</div></li>';
       return $items;
}

Add Toggle Effect to the WordPress Search Form

Now add CSS and JS script to get the desired toggle effect. I am using Simple Custom CSS and JS plugin for enqueuing the scripts. After activating plugin move to the plugin settings and add CSS and JS blocks by using the following scripts.

jQuery(document).ready(function($) {
  $(".search_icon").click(function() {
    $(".spicewpsearchform").slideToggle();
  });

  $(document).keydown(function(e) {
    if (e.keyCode == 27) {
      //$(modal_or_menu_element).closeElement();
      $(".spicewpsearchform").hide();
    }
  });
});

.spicewpsearchform{
    display: block;
    width: 500px;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 1px;
    z-index: 9999;
    background: #fff;
    padding: 20px;
    border: 5px solid #d05353;
}
#spicewpsearchform input[type="text"] {
    width: 78%;
    height: auto;
    border: 1px solid #5ca2df;
    padding: 11px 12px;
    border-radius: 0px !important; 
    }
#spicewpsearchform input[type="submit"] {
    line-height: 1;
    padding: 14px 20px;
    border-radius: 0px;
    height: auto;
    font-size: 15px;
    display: inline-block;
    border: 1px solid #5ca2df;
}
#spicewpsearchform:before {
    border-color: transparent transparent #d05353;
    border-style: solid;
    border-width: 0.5em;
    content: "";
    display: block;
    position: absolute;
    right: 22px;
    top: -20px;
    z-index: 10;
}

/**Css for image search icon**/
.spicewpsearch_icon {
   background-image: url('images/search-icon.png');
   background-repeat: no-repeat;
   padding: 0 0 0 36px;
   background-position: 5px center;
   background-color: transparent;
   background-size: 18px 18px;
       
}

You can manage the appearance of the search box by doing the necessary adjustments to the CSS rule.

Final Result

Hope you find this article useful.