Support » Themes and Templates » Move Search Box to Nav Bar in Twenty Twelve Child Theme

  • Resolved adlawrence


    Hi all! I’m trying to put my search box in my nav bar. (theme: Twenty Twelve Child, URL: )

    It looks like HaHaYouSuck’s code is perfect, but I can’t seem to figure out the best place to plug it in.

    <div class="alignright" margin= "1rem">
    	<?php get_search_form(); ?>
    </div><!-- .alignright -->
    <!--end addition of search bar in header -->

    Here’s the code I want to plug it into, in the file:

    <nav id="site-navigation" class="main-navigation" role="navigation">
         <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
         <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>">
         <?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
         <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    </nav><!-- #site-navigation -->

    However, if I place it just above

    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

    then the search bar appears above the nav bar. If I post it below that same line of code, it’s below the nav bar.

    I’ve searched other files and am coming up empty-handed. Suggestions?

    (I also tried the suggestions Alchymyth put forward and neither worked for me. I also searched Google and the forums and didn’t see an answer for the Twenty Twelve theme. If there is an answer posted about this, I’m very sorry I didn’t find it.)


Viewing 5 replies - 1 through 5 (of 5 total)
  • For anyone wondering, the solution couldn’t be simpler. Here are directions (found by steveshead and discussed in this thread):

    1. Create a new php file in your child theme called functions.php. Here’s all of the code you’ll need:

     * Twenty Twelve Child functions additions.
     * Add a search bar to the navigation menu.
     * @since Twenty Twelve 1.0
    function menu_search($items){
        $search = '<li class="search">';
        $search .= '<form method="get" id="searchform" action="/">';
        $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;

    2. Upload said file into your child theme.

    3. Disable the default navbar/menu. To do so, go to: Admin/Appearance/Menu and create a new navbar/menu. Once the new one is created, make it the primary menu by clicking on the drop down menu in the “Theme Locations” box on the same page. Add the links you’d like included in the menu and save.

    4. Voila. Check your website to make sure everything works.

    This works great but, I have several navigation menus and it adds a search box to every one of them. Can this be made to affect the main navigation menu only?

    This is great – many thanks.

    However, the search box has been placed under the current menu items, rather than in line. If I remove a menu item it jumps in line. There appears to be plenty of space.

    Unfortunately my site isn’t live yet so I can’t post a link.

    Any thoughts? Thanks

    I’ve followed the four instructions above, and it worked perfectly. But can anyone tell me how to move the search bar to the right hand side of the nav menu?

    I’m glad my post helped. I’m not sure what to do about the search box. I suggest starting a new thread so it will catch someone’s attention. Unfortunately, posting to old threads are less likely to get responds from the WordPress mods.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Move Search Box to Nav Bar in Twenty Twelve Child Theme’ is closed to new replies.