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.
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 == '') {this.value = ''.$search_text.'';}" onfocus="if (this.value == ''.$search_text.'') {this.value = '';}" />'; $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
RRS feed