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.
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.
This is the best search toggle I have found. I modified it to use a button on the header (rather than a menu item). I’ve changed the PHP to create a shortcode that calls a png (rather than an icon). Everything works if I put the shortcode in the body of my page, but when I add it to my header, clicking on the png reveals the search form but then immediately hides it again.
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?
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!
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!
This is the best search toggle I have found. I modified it to use a button on the header (rather than a menu item). I’ve changed the PHP to create a shortcode that calls a png (rather than an icon). Everything works if I put the shortcode in the body of my page, but when I add it to my header, clicking on the png reveals the search form but then immediately hides it again.
Any ideas?
Cheers, Richard
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.
this would make a neat little free standalone plugin – have you ever thought about making one out of this code?
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!
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?
You can see that here – https://wpbeaches.com/add-menu-items-in-a-certain-place-with-wp_nav_menu_filter/
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!
The php snippets go in functions.php, the CSS goes in style.css, the jQuery needs to be added to an enqueued script see https://wpbeaches.com/jquery-document-ready-function-for-wordpress/ and https://wpbeaches.com/add-javascript-css-files-head-wordpress/