Skip to content

Instantly share code, notes, and snippets.

@neilgee
Last active January 19, 2023 12:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save neilgee/4a9fccd79bf5c2307508b1dfa4adb004 to your computer and use it in GitHub Desktop.
Save neilgee/4a9fccd79bf5c2307508b1dfa4adb004 to your computer and use it in GitHub Desktop.
Add Search Toggle at End of Menu
<?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>';
}
<?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;
}
/********************
* 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;
}
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();
}
});
});
<?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;
}
@TetianaStupak
Copy link

Hello. Thank you for your example. What which do you have the searchform?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment