Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.