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.

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.