Skip to content

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.

4 Comments

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

  2. 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 a Comment





Scroll To Top