transmitstudio
1/13/2017 - 11:47 PM

Add search function to nav bar without a plugin. PHP should work untouched, CSS will probably need a bit of tweaking, depending on your them

Add search function to nav bar without a plugin. PHP should work untouched, CSS will probably need a bit of tweaking, depending on your theme. Also requires an image – in this case, I used an SVG, the size of which is governed by the width and height parameters.

add_search_to_nav.php
content_copyfile_download
// add to functions.php
function add_search_to_wp_menu ( $items, $args ) {
	if( 'primary' === $args -> theme_location ) {
		$items .= '<li class="menu-item menu-item-search">';
		$items .= '<form method="get" class="search_form_image_button" action="' . get_bloginfo('home') . '/"><p><input class="text_input" type="text" value="Search" name="s" id="s" onfocus="if (this.value == \'Search\') {this.value = \'\';}" onblur="if (this.value == \'\') {this.value = \'Search\';}" /><input type="submit" class="my-search-image" id="searchsubmit" value="search" /></p></form>';
		$items .= '</li>';
	}
	return $items;
}
add_filter('wp_nav_menu_items','add_search_to_wp_menu',10,2);
add_search_to_nav.css
content_copyfile_download
/* change search button to mag glass
--------------------------------------------- */
.search_form_image_button {
    font-family:arial;
    margin-left:auto;
    margin-right:0;
    width:200px;
}

.search_form_image_button #s {
    background:#fff;
    border:1px solid #339403;
    font-size:12px;
    margin: 7px 6px 0 12px;
    padding:4px;
    width:154px;
    float: left;
    text-transform: uppercase;
    color: #8bbf72;
}

input#searchsubmit.my-search-image {
    background:#fff url("images/magnifying-glass.svg") no-repeat 50% 50%;
    border:0 none;
    cursor:pointer;
    height:24px;
    text-indent:-9999px;
    width:24px;
    float: right;
    margin-top: 6px;
}

.menu-item.menu-item-search {
    padding-left: 6px !important;
}