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.

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();
    }
  });
});
CSS
.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

WordPress Search Icon Toggle Effect

Hope you find this article useful.

Did you enjoy this article?
Get Awesome with WordPress. Subscribe and get awesome stuff delivered straight to your inbox.
I agree to have my personal information transfered to Mad Mimi ( more information )

2 thoughts on “How to add Search Icon with Toggle Effect in WordPress Menus

  1. i looked through tons of instructions on this – and yours is the only one i could make work, thank you! the only 2 things i can’t figure out is
    1) how to get the search icon to sit at the right side of the menu not below it.
    2) get the search input bar to appear on the navigation bar rather than below it

    • Thanks for liking this article, placing the search box directly in the navbar, depends, on the theme you are using. You can use the filter wp_nav_menu_items and ask for the custom JS to show box directly in navbar to the developers of the theme.

Leave a Comment