WordPress search form in primary navigation

Utveckling

WordPress search field in menu navigation

I am working on a new WordPress site using the TwentyTwelve responsive theme. I wanted the search form to render on the same level as the primary navigation main menu. This is the code I was using to solve this. This code is valid for most WordPress themes.

WordPress search form in primary navigation

Put this code block in your themes functions.php-file in the
\wp-content\themes\YourThemeFolder\

add_filter('wp_nav_menu_items', 'add_search_form', 10, 2);
	function add_search_form($items, $args) {
	if( $args->theme_location == 'primary' )
		$search_text = "Search";
		$items .= '<li id="search-form"><form method="get" id="searchform" action="'.home_url().'/">';
		$items .= '<input type="text" value="'.$search_text.'" name="s" id="search-input" onblur="if (this.value == &#39;&#39;) {this.value = &#39;'.$search_text.'&#39;;}" onfocus="if (this.value == &#39;'.$search_text.'&#39;) {this.value = &#39;&#39;;}" />';
		$items .= '<input type="submit" id="searchsubmit" value="Search" />';
		$items .= '</form></li>';
	return $items;
}

If you do not like the Search-button, just replace this line

$items .= '<input type="submit" id="searchsubmit" value="Search" />';

with this

$items .= '<input type="hidden" id="searchsubmit" />';

Add this styles in your themes style.css-file in the
\wp-content\themes\YourThemeFolder\

#search-form { float:right; margin:0; }
#search-input {
	margin:6px 0;
	width: 150px;
	font-style: italic;
}

The result should be something like the image above!
By the way, have a look at the excellent new Twenty Twelve theme with responsive design created by the WordPress team!
Download the new WordPress 2012 Twenty Twelve Theme

,

By  -      


Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *