Last active
January 19, 2023 12:13
-
-
Save neilgee/4a9fccd79bf5c2307508b1dfa4adb004 to your computer and use it in GitHub Desktop.
Add Search Toggle at End of Menu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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>'; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/******************** | |
* 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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | |
} | |
}); | |
}); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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
Hello. Thank you for your example. What which do you have the searchform?