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. 😛

3 Answers
3

based on : http://wpfirstaid.com/2010/10/extend-the-wordpress-menu/

function wpa_58902($items){
    $search="<li class="search">";
    $search .= '<form method="get" id="searchform" action="https://wordpress.stackexchange.com/">';
    $search .= '<label for="s" class="assistive-text">Search</label>';
    $search .= '<input type="text" class="field" name="s" id="s" placeholder="Search" />';
    $search .= '<input type="submit" class="submit" name="submit" id="searchsubmit" value="Search" />';
    $search .= '</form>';
    $search .= '</li>';

    return $items . $search;
}
add_filter('wp_nav_menu_items','wpa_58902');

Leave a Reply

Your email address will not be published. Required fields are marked *