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

<?php //<~ don't add me in
add_filter('wp_nav_menu_items', 'wpb_add_search_toggle', 10, 2);
// Filter in Search Toggle to end of primary menu
function wpb_add_search_toggle($items, $args) {
if( $args->theme_location == 'header' ) //Swap to your location
$items .= '<li class="search search-wpb"><a class="search-icon"><i class="fas fa-search"></i></a><div style="display:none;" class="wpbsearchform">'. get_search_form(false) .'</div></li>';
return $items;
}
view raw themelocation.php hosted with ❤ by GitHub

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.

<?php //<~ don't add me in
add_filter('wp_nav_menu_primary-menu_items', 'wpb_add_search_toggle', 10, 2);
// Filter in Search Toggle to end of primary menu
function wpb_add_search_toggle($items, $args) {
$items .= '<li class="search search-wpb"><a class="search-icon"><i class="fas fa-search"></i></a><div style="display:none;" class="wpbsearchform">'. get_search_form(false) .'</div></li>';
return $items;
}
view raw menu-location.php hosted with ❤ by GitHub

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

jQuery(document).ready(function($){
/* Search Menu */
$(".search-icon").click(function() {
$(".wpbsearchform").slideToggle();
});
$(document).keyup(function(e) {
// Ref https://stackoverflow.com/questions/3369593/how-to-detect-escape-key-press-with-pure-js-or-jquery
// Close search if esc key pressed
if (e.key == "Escape") {
$(".wpbsearchform").hide();
}
});
});
view raw search.js hosted with ❤ by GitHub

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

/********************
* Search Navigation
********************/
.search-wpb .fa-search {
color: #666666;
font-weight: 900;
}
.search-wpb .fa-search:hover,
.search-wpb .fa-search:focus {
color: #999999;
text-decoration: none;
}
.wpbsearchform{
display: block;
width: 400px;
position: absolute;
right: 0;
top: 100%;
margin-top: 1px;
z-index: 9999;
background-color: rgba(200,199,197,0.8);
padding: 0;
border-radius: 0;
-webkit-box-shadow: 0 1px 10px rgba(0,0,0,0.15);
box-shadow: 0 1px 10px rgba(0,0,0,0.15);
border: 1px solid #ccc;
}
.wpbsearchform form input:focus {
color: #555;
}
.wpbsearchform input[type="search"] {
border-radius: 0;
}
.wpbsearchform ::-moz-placeholder {
color: #999 !important;
font-weight: 300;
opacity: 1;
}
.wpbsearchform ::-webkit-input-placeholder {
color: #999 !important;
font-weight: 300;
}
view raw search.css hosted with ❤ by GitHub

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.

<?php //<~ don't add me in
add_filter( 'get_search_form', 'wpb_alter_search_form', 20 );
// Modify Search Form
function wpb_alter_search_form( $form ){
return '<form role="search" method="get" id="searchform" action="' . esc_url( home_url( '/' ) ) . '" >
<input type="search" name="s" placeholder="SEARCH..." value/>
</form>';
}

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

2 Comments

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