Add search form in menu

  • Hi,

    Who to add a simple search form in main menu in same line.

    The code of main menu is:

    <nav class=”header__navigation collapse navbar-toggleable-md” id=”structurepress-main-navigation” aria-label=”<?php esc_html_e( ‘Main Menu’, ‘structurepress-pt’ ); ?>”>
    <!– Home Icon in Navigation –>
    <?php if ( ‘yes’ === get_theme_mod( ‘main_navigation_home_icon’, ‘yes’ ) ) : ?>
    “>
    <i class=”fa fa-home”></i>

    <?php endif;

    if ( has_nav_menu( ‘main-menu’ ) ) {
    wp_nav_menu( array(
    ‘theme_location’ => ‘main-menu’,
    ‘container’ => false,
    ‘menu_class’ => ‘main-navigation js-main-nav’,
    ‘walker’ => new Aria_Walker_Nav_Menu(),
    ‘items_wrap’ => ‘<ul id=”%1$s” class=”%2$s” role=”menubar”>%3$s’,
    ) );
    }
    ?>
    </nav>

    and i like to add this search form:

    <form role=”search” method=”get” class=”search-form” action=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”>
    <label>
    <span class=”screen-reader-text”><?php esc_html_e( ‘Search for:’, ‘structurepress-pt’ ); ?></span>
    <input type=”search” class=”form-control search-field” placeholder=”<?php esc_html_e( ‘Search’, ‘structurepress-pt’ ); ?>” value=”” name=”s”>
    </label>
    <button type=”submit” class=”btn btn-primary search-submit”><i class=”fa fa-lg fa-search”></i></button>
    </form>

    Thanks very much!

Viewing 1 replies (of 1 total)

  • You should be able to accomplish this by adding this to your functions.php file: (You might need to adjust the CSS to align it properly.)

    add_filter(‘wp_nav_menu_items’, ‘add_search_form’, 10, 2);

    function add_search_form($items, $args) {
    if( $args->theme_location == ‘MENU-NAME’ )
    $items .= ‘<li class=”search”><form role=”search” method=”get” class=”search-form” action=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”><label><span class=”screen-reader-text”><?php esc_html_e( ‘Search for:’, ‘structurepress-pt’ ); ?></span><input type=”search” class=”form-control search-field” placeholder=”<?php esc_html_e( ‘Search’, ‘structurepress-pt’ ); ?>” value=”” name=”s”></label><button type=”submit” class=”btn btn-primary search-submit”><i class=”fa fa-lg fa-search”></i></button></form>’;
    return $items;
    }

Viewing 1 replies (of 1 total)
  • The topic ‘Add search form in menu’ is closed to new replies.