WordPress.org

Support

Support » Themes and Templates » Search bar in the main menu OR in a container div containing both in floats

Search bar in the main menu OR in a container div containing both in floats

  • Ultimately I want to put the search bar into the main menu. Given that there is more than one way to make an omelette, I appreciate I could put it as the last child of the menu and position it using css OR I could create a container div which floats the menu to the left and floats another container to the right which hosts the search bar.

    My query then is which of the two techniques might be better and if the former solution is better; the search bar in the menu, how the hell do I do it?

Viewing 15 replies - 1 through 15 (of 20 total)
  • HaHaYouSuck
    Member

    @hahayousuck

    I put it in the header and really like it there. But then I moved the menu elsewhere. Maybe this would work for you in a custom menu somewhere?

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

    I’ve got mine currently in the header in the same way but I think I’d like to persevere with trying to put it in the menu itself as the last child of the menu. I’ll see what I can dig up in other posts. I’m sure it’s going to need a function in the functions.php file but I think I’ll be able to find posts on that as it’s not Twenty Twelve specific. It’s when you want to modify Twenty Twelve specifically you come across more problems as its a newish theme and there is less written about modifying it.

    Thanks for your reply.

    r

    Michael
    Forum Moderator

    @alchymyth

    any websearch ‘add search bar to custom menu wordpress’ might have resulted in some useful links;
    related:
    http://www.wprecipes.com/how-to-automatically-add-a-search-field-to-your-navigation-menu

    Add Search Form to WordPress Nav Menu

    My original post wasn’t well written. The purpose of the post was to ask whether others felt it was a better technique to include the menu in the header or in the menu aesthetically and for logistical reasons although in my final line I asked for a ‘how to’.

    The first respondent responded to the initial part of the question. He/She was happy to have it in the the header.

    My subsequent post reiterated that, should I consider that putting the search bar in the menu was a better option, then it was my responsibility to put in a little research before posting for a solution.

    Accepting that the original post was unambiguous in that it ended with a request for a solution, the sarcasm of the tone of the moderator’s response aggravated me somewhat although I do VERY much appreciate that the moderator directed me towards a solution in their post.

    I’m a teacher (during the daytime) and so I appreciate more than most that the ‘learned’ should value the desire of the ‘learner’ to ‘learn’.

    Less sarcasm would be appreciated by the users of the forum although we VERY much appreciate the help you give us.

    A request, though; please respect the fact that we are learning and doing all we can to learn. And your place on the web is a place of knowledge. We don’t always inherently understand your frustrations at being asked a question that has been asked before as we don’t do your job as you don’t do ours. I’m only a coder by night. During the day I teach other things.

    You slapped my wrists and I’m now slapping yours.

    Finishing I reiterate that, while I haven’t yet finished implementing the solution, I only know of it on the basis of your post. But your job isn’t to be sarcastic (if you are paid for it). It is to help the ‘less learned’ to learn.

    I don’t think Alchymyth was being sarcastic, but factual.
    A moderator doesn’t have a responsibility. If a moderator had a responsibility, it would be to moderate the forum.

    If you’re not satisfied with the level of support provided by these forums, try hiring someone at http://jobs.wordpress.net .

    Andrew his help was perfect. He responded to a post and gave me directions towards a solution which I very much appreciate and might allow me to move on with the development of my site. I fully understand that this forum is not a place to ask for someone to write your code for you and tried as best as I could to reiterate in my response to him that my original post was not well written and came across as asking for a ‘quick fix’ which I fully understand is not the point of any technical forum. It’s about techniques that we share between us that allow us to move on together.

    I repeat. I didn’t like is tone. I taught a group of 14 year olds today to teach them about density as a concept. If I had said to them “how ignorant you are to not have first searched the available literature before asking me an ‘obvious’ question, do you really consider I would be ‘in the right’? It might have been an obvious question to me who already knows but to him it was a part of the learning process.

    We’re arguing over semantics, this isn’t the place and I ABSOLUTELY agree that my original post was ‘late night’ and not well written. I’m in the wrong here. I wrote a crap question or included a crap part in a genuine question. I stand, nonetheless by what I wrote earlier. Learners make mistakes and the learned should allow a degree of tolerance of these. Read the thread from start to beginning. The original post wasn’t meant to be a ‘write me my code for me request’. It was nothing other than ‘late night’ and I shall do everything I can to avoid repeating my mistake.

    Michael
    Forum Moderator

    @alchymyth

    there is no ‘tone’ in my reply – it simply referred to the first paragraph of the forum guidelines – http://codex.wordpress.org/Forum_Welcome#Search_First

    imho, this forum is not setup to teach WordPress.

    adlawrence
    Member

    @adlawrence

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

    It looks like HaHaYouSuck’s code is perfect, but I can’t seem to figure out the best place to plug it in. Here’s the code I want to plug it into, in the file: reddoorreview.com/wp-content/themes/twentytwelvechild/header.php

    <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 before 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.)

    Cheers!

    Hi adlawrence, I think it would be best to start your own thread regarding this.

    steveshead
    Member

    @steveshead

    I found this on the web, and currently use it on a test site. This will add a search box to all menus, if you have more than just the primary. This goes in the functions.php by the way.

    /**
     * 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;
    }
    add_filter('wp_nav_menu_items','menu_search');

    If you have more than one navigation menu I’ve found the easiest way to remove it from unwanted menus is to use CSS. For instance I have a header widget with a custom menu in it, but I don’t want the search function in there. I used this CSS:

    #headerWidget .search {
         display: none;
    }

    I’m not an expert in PHP so I find the above the easiest way to remove something like that. Feel free to use, or not as the case may be.

    adlawrence
    Member

    @adlawrence

    Steveshead, thanks for posting the php. Instead of pasting the code into the parent theme’s functions.php file, I created a new one for my child theme and pasted it into there. However, it isn’t working. I’m not sure if it’s because the code doesn’t work on my site or if I missed something when I created the PHP file. Here’s all of the code in that one file:

    <?php
    /**
     * Twenty Twelve Child functions and definitions, added for RedDoorReview.com.
     */
    
    /**
     * 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;
    }
    add_filter('wp_nav_menu_items','menu_search');

    [Signature moderated]

    steveshead
    Member

    @steveshead

    Hmm – I’ve used this a few times with no issue. Are you using a menu built in the admin panel, or just the default menu?

    adlawrence
    Member

    @adlawrence

    Default menu.

    steveshead
    Member

    @steveshead

    Try creating a menu in admin/appearance/menu – that might be why it’s not showing.

    adlawrence
    Member

    @adlawrence

    You are f-ing awesome. Thanks, steveshead. You not only helped me solve this problem, but another I’ve been wondering how to fix. That’s the fastest navbar I’ve ever made. Thanks again!

    P.S. My website is: http://reddoorreview.com

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Search bar in the main menu OR in a container div containing both in floats’ is closed to new replies.