I am using the Twenty Twelve theme, and the following is the code it uses to register and display the menu.
In functions.php:
function twentytwelve_setup() {
...
// This theme uses wp_nav_menu() in one location.
register_nav_menu( 'primary', __( 'Primary Menu', 'twentytwelve' ) );
...
}
add_action( 'after_setup_theme', 'twentytwelve_setup' );
In header.php:
<nav class="site-navigation main-navigation" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav>
And the output code looks similar to this:
<nav class="site-navigation main-navigation" role="navigation">
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-9">
<a href="http://aahank.com/">Home</a>
</li>
<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12">
<a href="http://example.com/">About</a>
</li>
</ul>
</div>
</nav>
But I would like to modify the output so that a search box can be integrated into the navigation menu as a menu item like so:
<nav class="site-navigation main-navigation" role="navigation">
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-9">
<a href="http://aahank.com/">Home</a>
</li>
<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12">
<a href="http://example.com/">About</a>
</li>
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13">
<!-- Search box inside nav as a menu item -->
<form method="get" id="searchform" action="https://wordpress.stackexchange.com/">
<label for="s" class="assistive-text">Search</label>
<input type="text" class="field" name="s" id="s" placeholder="Search" />
<input type="submit" class="submit" name="submit" id="searchsubmit" value="Search" />
</form>
</li>
</ul>
</div>
</nav>
How do I go about doing this? I need a code-backed pointer or two. Spoon-feeding is welcome too. 😛