Add Search Toggle Icon at End of Menu in WordPress

In WordPress, you can add a search toggle field at the end of a menu using the filter wp_nav_menu_items or a similar menu filter by which you can append menu items at the end of the targetted menu, add a slideToggle with jQuery for the show/hide effect and a bit of CSS.

Add Search Toggle End Menu

Targetting the Menu

So in the above snippet, you can target the menu based on a theme location, however sometimes this is not possible, there is a variant filter which uses the actual menu ID name so that can be targetted directly.

So in the above, the filter name is modified to be wp_nav_menu_primary-menu_items after the primary-menu CSS ID.

Both snippets use the FontAwesome 5 for the search icon, the actual div that holds the search form is initially set to hide as jQuery slideToggle function will be used to reveal it.

jQuery slideToggle to Reveal Search Form

As well as the search form be set to slideToggle on click, a second function will dismiss the search form if the ESC key is clicked.

Style the Search Form

Style the search form to your hearts content.

Modify the Search Form’s Content

You may want to modify the search forms content such as the placeholder text, this is possible with the get_search_form filter.

So above I am just changing the placeholder value to something different from the default.


  1. Andrew on October 16, 2021 at 10:13 am

    Hi Neil,

    Thank you for this post. This is what I was looking for, however, it doesn`t work for me, unfortunately. Maybe I`m doing something wrong, could you, please, advise.

    I`m using a child theme on top of the main theme and this child theme contains only two files – functions.php and style.css. I tried to include both of the first two snippets into the functions.php of my child theme and none of them works. I assume I`m supposed to see a search icon appeared in my main menu after I add these snippets.

    Should I include all the snippets into the main theme files or what may be the issue?

    I`ll appreciate your help.

  2. VH on November 16, 2020 at 9:43 am

    this would make a neat little free standalone plugin – have you ever thought about making one out of this code?

  3. Straktor on October 7, 2020 at 8:18 am

    Hi. Thanks for the snipper. Works fine. Is it possible to make it hide when you click anywhere? Or even better, to work for mobile as well? Thanks in advance!

  4. Molly on September 24, 2019 at 3:33 pm

    Hi! thank you so much for this great tutorial. I’m wondering how I could add the search icon before the first menu item rather than at the end?

  5. Marie on June 7, 2019 at 12:46 pm

    Hi! Your toggle search function is exactly what I would like to achieve on my site! Thanks for the tutorial. However, I’m not very good with PHP and Js, could you tell me where these snippets should be put please? (functions.php ? I also tried adding a snippet with a plugin, but for now none of this has worked haha! especially the jquery part, I had no idea where to put it). Sorry I’m feeling like such a noob here!! If you have time to enlighten me I’d be very grateful. Thank you!

Leave all Comment