Add search to navbar in WordPress

1 Views

Is it possible to add search to navbar in wordpress sparkling theme?
My site is http://www.wpfever.com.

I have tried adding the following code in header.php:

Read More
<?php get_search_form(); ?>

Replaced by the following: 

<?php if ( has_nav_menu( 'main_nav' ) ) { ?>
      <?php wp_nav_menu( array( 'theme_location' => 'main_nav' ) ); ?>
      <?php } else { ?>
      <ul><?php wp_list_pages("depth=3&title_li=");  ?></ul>
      <?php } ?>
Post Views: 1

Related posts

2 comments

  1. I got inspired by this solution, but would select the 1st approach for simplicity:

    Add this to your plugin / theme functions.php:

    add_filter('wp_nav_menu_items','add_search_box_to_menu', 10, 2);
function add_search_box_to_menu( $items, $args ) {
    ob_start();
    get_search_form();
    $searchform = ob_get_contents();
    ob_end_clean();

    $items .= '<li class="navbar-search">' . $searchform . '</li>';

    return $items;
}

    Then some CSS (just added this to theme style.css):

    .navbar-search {
    margin: 10px 0 20px 0;
    width: 200px;
}

@media (min-width: 768px) {
    .navbar-search {
        margin: 20px 0 20px 30px;
    }
}

  2. Your theme based on bootstrap frame work you can use this code below to show search form with menu

    <?php if ( has_nav_menu( 'main_nav' ) ) {
    wp_nav_menu( array( 'theme_location' => 'main_nav' ) );
} else { 
?>
<ul><?php wp_list_pages("depth=3&title_li="); ?></ul>
<?php } ?> 

<form class="navbar-form navbar-right" role="search" action="<?php echo home_url( '/' ); ?>" method="get">
<div class="form-group">
    <div class="input-group">
        <input type="text" name="s" id="search" value="<?php the_search_query(); ?>" class="form-control" placeholder="<?php __("Search"); ?>" />
        <span class="input-group-btn">
        </span>
        <button type="submit" class="btn '.$YPE_navbar_options['btn_style'].'"><i class="glyphicon glyphicon-search"></i></button>
        ?>
    </div>
</div>
</form>

    but if you want only show the search form only paste the below code instead the above code

     <form class="navbar-form navbar-right" role="search" action="<?php echo home_url( '/' ); ?>" method="get">
<div class="form-group">
    <div class="input-group">
        <input type="text" name="s" id="search" value="<?php the_search_query(); ?>" class="form-control" placeholder="<?php __("Search"); ?>" />
        <span class="input-group-btn">
        </span>
        <button type="submit" class="btn '.$YPE_navbar_options['btn_style'].'"><i class="glyphicon glyphicon-search"></i></button>
        ?>
    </div>
</div>
</form>

Comments are closed.