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() {

  $(document).keydown(function(e) {
    if (e.keyCode == 27) {
    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.

9 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

    1. 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.

  2. I stumbled across your website through a search on Google.

    You look to have some really great WordPress tips on your site.

    Any reason why you haven’t implemented a search function on this site? There’s a particular page that I previously found and wanted to re-read. But I had to go back to Google to search for it again.

  3. Hi. This search icon does not work in a humburger menu (remains unclickable). Any way to correct that? I am using mh magazine lite theme if you want to test it out.

  4. I enjoyed the tutorial but I do not get the search icon in the dropdown search, instead I get a default button labeled ‘Search’ How can I achieve this?

  5. Excellent tutorial and the code works perfectly – except that it isn’t responsive. I would be very grateful if you could provide some advice about how to make the dropdown search form responsive. Many thanks.

  6. Hi. I managed to fix the responsive issue using the following CSS, which others may find helpful:

    @media screen and (max-width: 895px) {
    .spicewpsearchform {
    width: 100%;
    right: auto;

    All the best.

Leave a Comment

Your email address will not be published. Required fields are marked *