post

Search in the Nav Menu

Out of the box, the WordPress Twenty Ten theme includes a search box at the top of the right column. There is nothing wrong with this, but unless you have nine or ten categories in your navigation menu, there is plenty of space available in the menu itself, for a search box. This is an easy mod that will help your blog standout from the rest of the pack.

Editing the Twenty Ten theme header.php file to add a search box to the nav menuEarlier in this series, we modified the header.php file, in the Twenty Ten theme, to remove the title and blog description text from above the banner image. To add a search box to the navigation menu, we are going to add some new code to this same file. The code to insert, after the highlighted line above, is:

<div class="search-form">
<?php $search_text = "Search"; ?> 
<form method="get" id="searchform"  
action="<?php bloginfo('home'); ?>/"> 
<input type="text" value="<?php echo $search_text; ?>"  
name="s" id="s"  
onblur="if (this.value == '')  
{this.value = '<?php echo $search_text; ?>';}"  
onfocus="if (this.value == '<?php echo $search_text; ?>')  
{this.value = '';}" /> 
<input type="hidden" id="searchsubmit" /> 
</form>
</div>

Credit goes to Dagon Design for the code and you will note that the “Search” text, that will appear inside the search box, can be easily changed to anything you like.

Another method of inserting this code is to place it into a file called searchform.php, and put that file into the Twenty Ten theme folder. The code in this file can then be called using this line of code, in the header.php file:

get_search_form();

New search form added to the WordPress 3.0 nav menu, before CSS stylingWith the new code in place, refresh your browser to see the new search form inside the Twenty Ten theme’s navigation menu. Of course, this is not exactly where we want it to appear in the menu, but some simple CSS will center it vertically, and position it to the right. From the theme editor, scroll down the list of files and select Stylesheet. At the bottom of this file, add the following code:

.search-form input{
margin:10px 10px 10px 0;
width: 150px;
float: right;
font-style: italic;
}

Save the file and then refresh your browser to view the final results!

Search form added to the Twenty Ten theme navigation menu
Note that the old search form still resides in the sidebar column, but we will address the sidebar design and functionality, next time.

56 thoughts on “Search in the Nav Menu

  1. THANK YOU!! I have been searching and searching for a functional search box for menus in WP – this is the only one where both the php and css works properly!! Brilliant!

  2. When I put the search feature (without the css) it works but obviously it’s in the wrong spot, when I put it in with your css, it appears (and works), but in the wrong spot for my theme, to get it in the right spot for my theme, I need the top margin to be -33px and this breaks the “search” function. Help please :)

    PS. I realize this is almost a year after the last comment, sorry ;)

  3. Thanks so much for this code! I added other code which resulted in the actual code showing up in my menu bar instead of a search box. This code worked like a charm. Thanks again!

  4. Hi! I have copied the codes to my header.php and style.css but I can’t seem to make the search box move to the right. I have been working on this for weeks now. I hope you could help.

    • Sorry, Debbie – not sure what is happening. If you make it active on your site, I can take a look at it.

        • It looks good, Debbie – maybe you just need to clear your browser cache to see it on your side. You can also hide that search button – it has been some time since I used Google Custom Search, but there is a line like; input type=”submit” name=”sa”… and you can add style=”display:none” to that line. Good luck!

          • Great! I used EI and I saw the search box on the right. Thank you! And I’ll try your suggestion for the search button. =)

  5. Thanks Roy and Donna for the simple answer hahaha!! I do tend to over think things sometimes.

    After some searching around in my php files i found that the twenty ten options child theme im using has an radial button to disable or enable the search box in the navbar, so once again nice and simple.

    Great resource here Roy, I feel i will be a regular here.

    Happy New Year to you and you to Donna.

    mike

  6. Hi,
    After searching the net for a little while for this search box in the navbar option i luckily found this site.
    looking through the comments i noticed that Donna had a link to her site and see where she has put the search box, looks great donna by the way, very nice looking site you have there.

    On the site im working on i have two menu bars. The top menu bar which is above my twenty ten main image banner and a category navbar which is just below the main image.Now i want to have the search box in the top navbar so hopefully with a few more re-reads of your post above i should be able to get this done.

    A question to Donna, in your sidebar you have a widget/plugin titled CD reviews, I love the way the images are aligned in two columns, would you mind telling me what plugin you used for that?
    Looks great, i could do with having my six facebook pages images looking setup like that.

    Thanks
    mike

    • Mike – it looks like just a text widget with the hyperlinked images added manually, using the “alignnone” class.

    • Hi Mike, Roy is exactly right. I just used a text widget and manually put in hyplinks to the album cover photos and used alignleft then centered each ‘row’ of images inside the sidebar parameters. And thanks! Been working hard on making my site look appealing.

  7. i’m confused. i came back to try this on my new blog and i cant make head nor tail of it. the code in the grey box, with the red text, is not the same code as the picture underneath it. I have been able to add the search box in the menu area – but i cant find where to change any text from ‘search’ to what i want – it doesnt even say ‘search’ when i view it. Also. i tried adding the code you have to center the box and shove it to the right of the menu bar, but it seems to make my menu disappear totally and left justifies the box. i have deleted the code (so you cant look at it sorry) until i figure it out ;) it looked horrid as is. Thanks for any help.

      • Ugh – not sure what is going on, here. I will need to try this code tonight and see why it changed.

          • i will try it again tonight. now .. one more question – the second snippet of code to put the box over to the right side etc… is that in the parent or child theme files? also.. even though i deleted that code last night – for some reason my header jumped down about 20 pixels! i had had raised it up to the top of the page a year ago using your tutorial back then. no idea what the heck happened. :p

          • Right – the .search-form input { code goes in the child theme’s style.css file. I think when things went whacky on you, it was probably because you missed/left out a semi-colon on one of the lines, or maybe the closing } bracket on the end.

          • thanks i’ll test it tonight after dinner… any idea how i can move my header back up to the top of the page? is there maybe a way i can check my code to see if i deleted something by accident? i cant find your tutuorial from last year on moving the header. Thanks much for the help btw! much appreciated.

  8. Pingback: Search form in Nav bar – Wordpress | | KarmaCode.dkKarmaCode.dk

  9. i tried this and it works, but first it looks like a smaller search box, and once i click inside it to type in a search keyword, it then expands and turns white. i would like mine to look how it does once a cursor is placed inside, instead of having it change once i click into it. how can i do that? im guessing it has to do with the code design?

    • R u taking about the twenty eleven search box ? – It is smaller in size and transparent, once you click in it, it expands and turns white.

      Do you mean to say you want to change it from transparent to another color?

      • yes the twentyeleven searchbox. i wanted to make it so it doesn’t expand and then turn white, i want it to look how it looks when it is expanded permanently. basically, not have it be transparent at all, and for it to be longer like it is when expanded.

        • Even i wanted the same thing, i am still trying to solve the same thing, but i haven’t got it yet. Il make a post once i get it. till then all i did is add a search widget on the right.

          • yeah i did the same thing. i wanted it on the menu because i don’t have many menu items so it looks kind of empty. thought the search bar could fill it out. but since i dont like how it looks, i used the sidebar widget instead. oh well. let me know once you’ve figured it out!

  10. Do you know how to place the search form in the navigation menu of the twenty eleven theme ?
    Also how do i change the background of the search input field?

  11. Is the search box supposed to work? If I type a search word into it (that I know occurs in one of the existing posts) and then press enter, the site displays a blank page with no results.

  12. HI! thanks for the post! i was wondering if there’s a way to get the whole content to be centered in the navigation bar, instead of having menu on left and search on right side. thank you!

    • I’m trying to accomplish the same thing. I can get the menu centered but the search box remains far right. I think the problem is that WordPress puts the nav menu in a container.

  13. Hi, thanks very much for this information and ESPECIALLY for being so clear about where in each file to place the pieces of code you provided. The first piece worked just fine to get a search form into Twenty Ten’s menu bar, but the second one, placed at the bottom of my style.css file, is not moving the form at all. Any suggestions to fix this?

    Also in the styling you provided, when I try changing the “width” to a higher number, the search form isn’t widening. The width issue is less of a concern than positioning the search form in the bar. Thank you.

    • I came across the same style.css issue you were having, Jim. It took a bit of experimenting, but finally I figured out what to do to fix it.

      1. Open your style.css doc.

      2. Find the section called “/* =Menu”. This is where it lists all the #access styles.

      3. Go to the end of the Menu section and paste the following:

      #access .search-form input {
      margin:10px 10px 10px 0;
      width: 150px;
      float: right;
      font-style: italic;
      }

      4. Save it and relish in your genius :)

      • Victoria, sorry it’s taken me two weeks to reply, but I am now reveling in YOUR genius! Thank you so much for that piece of code, it did the job perfectly.

        Extra credit question: Any idea how I can add a small “GO” button to the left or right of the search box–in case users don’t know to simply press their “Enter” key?

  14. Hi Roy.. worked like a charm and very easy to do however…. it says ‘search Throwing a Brick’ even though I have removed ‘throwing a brick’ from your original code. any ideas??

        • so a few days later and I realize.. my search box is on my ‘front’ page of my site.. my content is in a secondary wordpress site (using it as a subdomain ie http://nightmaircreative.com/blog ) The blog has a search box up top too.. but since its hosted on a different wordpress, the search box on my main page wont bring any results will it? hmm..

          and now i begin to understand the importance of your other blog – navigation :)

    • Hi Karen – I see you have 1000px of width on #catmenu, so I’m wondering if the search box isn’t really pushed down – but actually pushed right and wrapped around to the next line (on the right side, because of the float)?

    • I run that same setup on my other blog too, David. I did not even notice that the drop-downs were not working in IE :) I think I can fix that – I’ll have a look this weekend.

      Look in the Twenty Ten theme’s style.css for;
      * html #access
      That is the “Tan Hack” workaround for IE. It should be pretty straightforward to do something similar for Thesis – I’ll have a look.

  15. Information like this is very useful, yet not always easy to find. Thanks for such clear and succinct directions. Worked like a charm!

Comments are closed.