Add serchbox to nav in twentyeleven

Do not edit the Twenty Eleven theme. It is the default WordPress 3.2 theme and having access to an unedited version of the theme is vital when dealing with a range of site issues.

Create a child theme for your customisations, then edit a copy of header.php in your child theme and remove the references to <?php get_search_form(); ?>.

Thanks esmi,

sorry forgot to mention that i was going to edit the child theme I had already created. The code I was looking for was to place the search-box into the main navigation. I have found examples of how to do this in twentyten but not twenty eleven.

Add this into functions.php of the theme:

<code>
function fb_add_search_box ( $items, $args ) {
	// only on primary menu
	if( 'primary' === $args -> theme_location )
		$items .= '<li class="menu-item menu-item-search">' . get_search_form( FALSE ) . '</li>';
	return $items;
}
add_filter( 'wp_nav_menu_items', 'fb_add_search_box', 10, 2 );
</code>

Check this article out, too: https://wpengineer.com/2244/search-form-in-wp-nav-menu/

Thanks hkalant

This was one of the first solutions I found but just cant get it to work in twentyeleven child theme just crashes my functions.php file and I have to go into the file directly and take it out to restore the site

try and use the snippet without the <code> bits; i.e. try:

function fb_add_search_box ( $items, $args ) {
     // only on primary menu
    if( 'primary' === $args -> theme_location )
         $items .= '<li class="menu-item menu-item-search">' . get_search_form( FALSE ) . '';
     return $items; }
add_filter( 'wp_nav_menu_items', 'fb_add_search_box', 10, 2 );

Wow – thanks for all the help but I’ve also tried that as well
this is what I have in my child themes function.php file below
for adjusting my header size.
I’ve tried the code inside and outside the <?php….?>

<?php
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1000 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 100 ) );
?>

[Please post code snippets between backticks or use the code button.]

@ravalde
the function from https://wpengineer.com/2244/search-form-in-wp-nav-menu/ seems to assume that you are using the custom menu; it does not seem to work with the default fallback wp_page_menu().

why did you remove the search form in the first place?

alchymyth

I didnt remove the searchbox, I just want move it into the navigation bar

ideally, you could post a link to your site; that makes helping with formatting/css issues easier.

the searchform position is defined in style.css, for different situations:

/* Search Form */
#branding #searchform {
	position: absolute;
	top: 3.8em;
	right: 7.6%;
	text-align: right;
}

and

#branding .only-search #searchform {
	top: 5px;
	z-index: 1;
}

and

#branding .with-image #searchform {
	top: auto;
	bottom: -27px;
	max-width: 195px;
}

you have to redefine this in style.css of your child theme;
example (adapt the numbers for your needs):

#branding #searchform {
  position: absolute;
  top: auto;
  bottom: -30px;
}

(you might need to redefine somthing for the other situations as well – no idea where they are called)

Cant get that to work either I probably need to learn how to create a widget area in the header. I’m working on wide pages so there is no widget available. I’ll have to figure out how to create a widget area in the branding or navigation I’ll post back if I have any success – thanks