How to Add Search Box in Thesis Theme Navigation Bar

Thesis users or upcoming thesis users, in this Video tutorial I am going to show, How to add search box in Thesis navigation bar. Mostly bloggers put search box in sidebar. Why? Because it is by default available as a widget in wordpress. So they are just putting in sidebar only. But in thesis have option to put your search box anywhere in your site. So lot of people like  to put search box in navigation bar. So I write about, How to add search box in Thesis navigation bar.

Ok. Come to my point. For doing this process, first you have to add two types of codes in your wordpress admin. That means you have to put codes in Thesis Custom_function.php and Cutom.css.

Watch Below video tutorial to add  search box in thesis navigation bar.

If you got any trouble to watch video follow below steps.

  • First you have to go your wordpress admin.
  • In wordpress admin, go to thesis option.
  • After that, go to thesis option. In thesis option click Custom File Editor, then paste below code in Custom.css. Now you can save your custom.css and go to your site. Then you can see search box in thesis navigation bar as per below screen short.
/* search box in navigation*/

.custom .search{

width:21em;

margin-left:77em;

margin-top:-3.5em;

border:2px solid #ddd;

background-color: #2F65C2;

}

.custom .nav_container {
width: 78%; }
.custom div.nav_container #s {

font-size:1.3em;

padding:0.308em;

width:15.385em;

}
  • In thesis option, go to custom file editor-> click Custom_funtion.php and paste below code or use FTP and put below code in custom_function.php(Why I prefer FTP. At the time of accessing Custom_funtion.php via your wordpress admin, it is showing some warning message. That’s why I prefer FTP)
//paste in custom_function.php

//search box in navigation

//remove thesis navigation

remove_action('thesis_hook_before_header', 'thesis_nav_menu');

//custom Nav

function custom_nav() {

echo '<div id="nav">';

echo '<div class="nav_container">';

thesis_nav_menu(); //this is default navigation

echo '<div class="search">';

thesis_search_form(); // add thesis search box

echo '</div>';

echo '</div>';

echo '</div>';

}

//place my custom nav above the header

add_action('thesis_hook_before_header', 'custom_nav');

Before Adding Search Box

Before adding search box

After Adding Search Box

After adding search box

If you got any problem about above process, write in comment box. I will help you. If it is useful for you, share your experience in comment box.

{ 68 comments… add one }

Leave a Comment

  • Jaydip Parikh December 29, 2009, 9:28 AM

    If I want to add Google Search blog not this Search box. How to do that ? I also want to know how we can add FeedBurner feed count in Nav Menu ?

    Reply
  • Pascal December 29, 2009, 3:56 PM

    Hi Jaydip,

    I think , you want to add google custom search box in navigation. ok. i will come with a post about that shortly. And for feedburner count button also.

    Reply
  • Pascal December 30, 2009, 1:20 AM

    Update:

    Hi Jaydip,

    Here i have posted tutorial for adding google cse in thesis nav bar. http://fourblogger.com/how-to-add-google-custom-search-in-navigation-menu/

    and another one for adding feedburner feed reader count button in thesis nav bar http://fourblogger.com/how-to-add-feedburner-feed-reader-count-button-in-thesis-nav-bar/

    Check the two tutorials and leave a comment if you need any help in doing this.

    Reply
  • Jaydip Parikh December 30, 2009, 10:44 AM

    Hey Pascal,

    You Rocks man !!

    Thanks for wonderful article. I am still having one request for you. Can we change order of Trackback and Comments.

    I mean to say in default thesis you will first find Trackbacks and then Comments. but I would like to have First Comments and then Trackback.

    How can I do that. Bye the way your blog is very cool and really impressive. Concept for Video help is really unique.

    Thanks for all man.

    Reply
  • Pascal December 30, 2009, 11:08 AM

    Hi Jaydip, Thanks for the kind words.

    Thanks for another request also. I am ready to solve any issue with thesis and wordpress.

    But i am not sure how long it is going to take figure out this. Soon i will come with the answer.

    Reply
  • Pascal December 30, 2009, 11:47 PM

    Hey Jaydip, Here is the answer for your question. It was very simple.
    http://fourblogger.com/how-to-display-track-backs-after-comments-in-wordpress-thesis-theme/

    Keep on reading. subscribe to our youtube video channel.

    Reply
  • Tanmoy January 29, 2010, 10:11 AM

    This tips help me to earn 5 USD :)

    Reply
  • Pascal January 30, 2010, 12:48 AM

    Hi Tanmoy, Glad our tips help you to earn also. :)

    Reply
  • Tony February 2, 2010, 4:22 AM

    Hi Pascal — was unable to use the code for a Google CSE (left comment on that post), so am trying this one. I use a minimalist design, and need just the search box without any border styles. When I remove the border styles from your code, the nav bottom border does not continue under the Search box. Can you suggest how to fix this?

    Tony

    Reply
  • Pascal February 2, 2010, 11:52 AM

    hi tony for your query, you can remove nav_container width and set search box margin-left 77em in custom.css. after finishing this process you can get navigation menu border as per your wish. if u got any problem contact us via contact form.

    Reply
  • Tony February 2, 2010, 7:14 PM

    Worked great!

    thanks
    Tony

    Reply
  • Pascal February 4, 2010, 4:23 PM

    Glad it worked.

    Reply
  • Pascal February 4, 2010, 4:22 PM

    You may missed any part of the javascript.

    Reply
  • Tia June 22, 2010, 8:21 PM

    I, too, followed the instructions precisely and the search box is not clickable. Only difference is where I placed the navigation (below instead of above header). Thoughts?

    // Remove Thesis Navigation
    remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);

    // Custom Nav
    function custom_nav() {
    echo ”;
    echo ”;
    thesis_nav_menu(); //this is default navigation
    echo ”;
    thesis_search_form(); // add thesis search box
    echo ”;
    echo ”;
    echo ”;
    }

    // Place my custom nav below the header
    add_action(‘thesis_hook_after_header’, ‘custom_nav’);

    Reply
  • Tia June 22, 2010, 8:21 PM

    Sorry… code below.

    // Remove Thesis Navigation
    remove_action('thesis_hook_before_header', 'thesis_nav_menu');

    // Custom Nav
    function custom_nav() {
    echo '';
    echo '';
    thesis_nav_menu(); //this is default navigation
    echo '';
    thesis_search_form(); // add thesis search box
    echo '';
    echo '';
    echo '';
    }

    // Place my custom nav below the header
    add_action('thesis_hook_after_header', 'custom_nav');

    Reply
  • Tia June 22, 2010, 8:22 PM

    I don’t know why the /div isn’t showing up but trust me it is in there.

    I am trying in the meantime to find solutions.

    Reply
  • Tia June 22, 2010, 8:27 PM

    Found it!! The key is to reduce the width of the nav bar so the search form doesn’t lose focus. Phew.

    http://diythemes.com/forums/basic-support/12974-search-bar-navigation.html#post65796

    Reply
  • Pascal June 22, 2010, 9:05 PM

    Hi TIa, I am glad you found the solution in minutes.

    Reply
  • brat45 February 4, 2010, 10:06 PM

    Hi Pascal

    I’am pretty sure that i did all your instruction but my search box is unclickable. Any know how it happen and how to solve this problem?

    Thanks in advance.

    Here’s my site if you want to see it http://kickurl.com/50718/

    Reply
  • Pascal February 4, 2010, 11:19 PM

    Hi brat,

    Once again copy and paste the code. You will now get click-able search box.

    Reply
  • Greg Friese February 7, 2010, 9:03 AM

    I was able to follow your tutorial to add the search box to the nav bar. I needed to do some adjusting of the top margin to make the search box align with the other tabs. But once I figured that out I am very pleased. Thanks!

    Reply
  • Pascal February 7, 2010, 9:37 AM

    .custom .search { margin-top:-2.7em; } in this code change -2.7 into -3em

    Reply
  • David Centeno, Esq. February 17, 2010, 12:41 PM

    I am also having the same problem as brat… My search box is not clickable, meaning you cannot enter a search text query???

    Any idea why?

    Reply
  • Pascal February 17, 2010, 12:54 PM

    I saw your site, there is no search box. If it is available, we can check otherwise we can’t check.

    Reply
  • Suresh February 24, 2010, 9:58 PM

    hai jacky,

    I saw your site which is not in live.. when its come to live i will check it..

    Reply
  • David Centeno, Esq. February 17, 2010, 1:02 PM

    you can visit yourwinningwebsite.com, another site of mine to check it out. thanks for the quick reply, like lightening!

    Reply
  • Suresh February 17, 2010, 2:38 PM

    hai david,
    Reduce your menu width. add this below line in custom.css file
    .custom .menu {width: 77.5%} then your search box will working fine..
    if you need border-bottom full width use border-bottom in .nav_container css code..

    Reply
  • David Centeno, Esq. February 19, 2010, 1:40 AM

    Thank you, would you be able to tell me what the code would look like, i am a beginner. thank you so much!

    Reply
  • Suresh February 19, 2010, 11:02 AM

    hai david,

    I saw your site. In your custom.css there is no code available for search box style thats why your search box appear too small. you should add css code for search box. and also in your custom.css menu code you have .custom .menu   {}

    this code remove    in menu code..then it is working fine..

    Reply
  • Pascal March 4, 2010, 3:32 PM

    i will put post soon.

    Reply
  • anonymous March 26, 2010, 8:07 AM

    did this ever happen? i’d like to learn how to change the text, the text color, background, etc.

    i learned a lot already from this tutorial, so thanks

    Reply
  • Suresh March 26, 2010, 3:52 PM

    hai,

    This tutorial may help you to get an idea to add background color , text font change and etc..

    Reply
  • Brian March 18, 2010, 5:51 AM

    This is exactly what I’m looking for. Although I have the navigation placed below the header, which has been put through some other changes as well (I don’t know php at all – code is copied).

    Is there a way to tweak my existing solution with your code – as it is now it won’t work. Some kind of conflict I guess.

    The blog hasn’t been launched yet but can be found on a temporary URL:
    http://brian.se.linweb58.kontrollpanelen.se/

    The following is being used in the custom_functions.php:
    //Header and nav
    function full_width_nav() { ?>

    <?php }
    remove_action('thesis_hook_before_header', 'thesis_nav_menu');
    add_action('thesis_hook_before_content_area', 'full_width_nav');

    And the following is being used in the custom.css:
    /* Body */
    body.custom {
    background:#151D25 url(images/bob_bg.png) 50% 0% fixed no-repeat;
    }

    /* Header */
    .custom #header_area .page {
    background:transparent;
    padding-top: 0;
    }

    /*.custom #header {
    padding-bottom: 0;
    padding-top: 0;
    border-top: 0px;
    }*/
    .custom #header {
    border-bottom: 0px;
    margin: 0;
    padding: 0;
    background: url(images/bob_header.png) no-repeat left top;
    }
    .custom #header #logo {
    text-indent: -9999px;
    }
    .custom #header #logo a {
    display: block;
    width: 959px; /*change this to the width of your image*/
    height: 120px; /*change this to the height of your image*/
    }

    Reply
  • Suresh March 18, 2010, 9:49 AM

    hai,

    what conflict you are facing.. tell me clearly what you need?…

    Reply
  • Brian March 18, 2010, 1:46 PM

    I update custom_functions.php and custom.css exactly as described above. But nothing happens. It stays put. So my guess is that it doesn’t work due to the code snippets above being in conflict in one way or the other. Maybe it is the locaction of the nav menu? Since the code snippet above directs it to be placed below the nav menu, in full width.

    Reply
  • Suresh March 20, 2010, 9:51 AM

    hai brian,

    The custom function code mentioned in the post is for page frame work.. you are using full width frame work..if you need your custom navigation below the header_area, In custom_functions.php code change the hook thesis_hook_after_header into thesis_hook_before_content_area.. it will give the custom nav menu below header similar to page framework..

    Reply
  • David May 4, 2010, 3:10 AM

    I would also like to know how to change the Thesis Search Box Text, “To Search, type and hit enter” to something else?

    Reply
  • Suresh May 4, 2010, 2:23 PM

    hai david,

    hacking the core and changing and changing the search box value is easy but while upgrading it may cause some problems.
    I am also ting the way to change the search box value without hacking the core…. I think Google custom search is better than thesis search.. That gives more relevant results for search query than thesis search box…

    Reply
  • David May 4, 2010, 6:07 PM

    Hey Suresh,

    What do you mean hacking the core? I tried to find the search form template in thesis theme but there is no file? I could only find searchform.php in the default theme folder. Is this the file we need to change? I don’t really want to change to Google custom search just to edit the search box text.

    Reply
  • Suresh May 5, 2010, 9:55 AM

    hai David,

    This file is not thesis search form it is a default wordpress theme search form.. if you need search from you should find in side the thesis theme folder..

    Reply
  • David June 4, 2010, 5:50 AM

    You can do this by using a thesis filter.

    // Change Default Search Text

    function custom_search_text($field_value) {
    $field_value = ‘Search Me’;
    return $field_value;
    }
    add_filter(‘thesis_search_form_value’, ‘custom_search_text’);

    Reply
  • tangologix June 9, 2010, 11:54 PM

    nice written . well informative article. i saw it operation on this blog too . nice written info man. thanks for posting.

    Reply
  • kellyhicks June 22, 2010, 10:46 PM

    Hi Pascal,

    Thanks for this article, I was able to get it working only I have a custom top nav so how to I change the code to not display the thesis nav again? You can see what I mean here: http://kellyhicksdesign.com

    I want the search box to be left aligned in the blue box and would like to remove the thesis nav.

    Reply
  • Suresh June 23, 2010, 10:54 PM

    hai kellyhicks,

    I checked your site.. I think you have finished the nav bar alignment..
    If not just mention what you need..

    Reply
  • Andrea H July 16, 2010, 9:00 AM

    I tried this and now my blog is just a plain white page. I took the code back out and it didn’t fix it. =(

    Thank you for the tutorial anyway.

    Reply
  • Pascal July 20, 2010, 10:59 PM

    have you fixed the issue? If not, contact me via contact form. THanks

    Reply
  • Melanie August 7, 2010, 12:56 PM

    I cant get the border to go around the whole Search bar.
    Please Help….. I truly love this code. Its awesome…
    Just this one little issue.. Please help…

    Melanie-

    Reply
  • Pascal August 9, 2010, 6:49 PM

    Hi melanie,

    Our thesis team totally move to our membershipsite fourbloggerclub. so nowadays we are solve any single thesis issue for $5 only. it is ok for you. send your requirements.
    contact us via contact form

    Reply
  • Edille November 9, 2010, 7:24 PM

    Hi pascal,

    This site has a wonderful video and helping a lot working in thesis theme.

    Say I have a request. Please check my underconstruction site > techmaso(dot)com

    You can see there that I have two sidebar in different colors. But my problem is, the color is hang in the air. What I mean is I want the color of my two sidebar to level or to reach to the footer. Can you help me with this? It is a big help you can do if so.

    Advance Thanks

    Reply
  • Oren December 14, 2010, 1:48 AM

    Hello.
    Thank you for this post.

    i do have one problem – i can’t write anything in the search box. it’s there but there is no way to write in it…
    please help… http://www.xn--4dbcyzi5a.com/
    thanks :)

    Reply
  • Gustavo @ GizmosHub January 26, 2011, 4:02 AM

    How do you add a search box if you have 2 navigation boxes? I want to add a search box to my second (top) navigation menu.

    Reply
  • Barry February 6, 2011, 11:30 PM

    Hi,

    Is there a way to add facebook and twitter follow in addition to the subscribe to rss feed in the navigation menu? I’ve been searching everywhere and cannot find this. Thanks in advance!

    Barry

    Reply
  • LoungeOwl February 8, 2011, 1:38 PM

    These codes didn’t work for me. I did get a search box, but the code also created a duplicate navigation bar.

    Reply
  • Matt Fetissoff March 30, 2011, 2:19 AM

    Yay! This is exactly what I needed! Thank you for taking the time to explain this thoroughly in both text and video :)

    Reply
  • Satish June 9, 2011, 12:00 AM

    Sir actually i am using a thesis skin called as velocity which is not having a navigation bar in the theme itself. so bcz of that i am loosing some pageviews and bad 80% bounce rate. if you can tell me how to add a nav bar along with a search box here coolpctips.com it would be a great help. thank you :(

    Reply
  • Austin August 27, 2011, 10:25 PM

    How can you add twitter counter (http://twittercounter.com/) button in the nav bar?

    Reply
  • FourBlogger August 29, 2011, 10:02 AM

    The concept is same as adding search box or anything in the nav. You should just replace the search box codes with your twitter counter display codes. .

    Reply
  • mohamed August 30, 2011, 3:45 PM

    hi guys can see this site the search box in header and the result in post body
    http://www.labnol.org/?s=mobile+tracker
    please tel me how can i do like this for my blogger

    Reply
  • FourBlogger August 31, 2011, 8:36 AM

    someone who uses and designs frequently on the blogspot platform, can answer you. I am not experienced on this.

    Reply
  • mohamed August 31, 2011, 2:30 PM

    thanks man just i will try this is the beauty of life you should try thanks a lot

    Reply
  • Ronald Colunga December 17, 2011, 8:59 PM

    Please help! If you go on http://Lifessteppingstone.com and look at the search box. I can’t get it completely into the nav menu. When I change the width to put it into nav menu it doesn’t become visible because of color. How do i fix this?

    Reply
  • Polly January 9, 2012, 8:45 AM

    Is there a way to change the text that is written in the search box? For example, I’d like it to say “Search this blog” instead of “To search, type and hit enter”

    Reply
  • Ta Granados January 20, 2012, 5:56 AM

    I added the search box and revised my code to have it after the header. However, the search box is bumping down below the nav tabs instead of to the right. I’d like it to be located just like your example (except under the header) and am unsure as to if I need to revise the 78% in your css or something else.

    Reply
  • George Gennaoui February 5, 2012, 1:05 AM

    I use the wordpress nav bar instead of the thesis theme one. How can I do it for that?

    Reply
  • QuickLOL April 1, 2012, 5:57 PM

    Hi mate I just wanted to say thanks for all the Thesis tutorials you have on here. I Have Googled how to change a few different things to the theme and your website always seems to come up! This is the 4th article and video of yours I have used for my site and they are always very useful and work great :). Thanks for your great work and I wish you much success with your helpful website. I have bookmarked now and will be checking out a few more of your tutorials.

    Reply
  • QuickLOL April 1, 2012, 6:15 PM

    Also for anyone who wants the search box UNDER the banner then change the “thesis_hook_before_header’” to: thesis_hook_after_header’ in the custom php code fourblogger provides :)

    Reply
  • FourBlogger April 10, 2012, 1:39 PM

    Yes, our site is good resource for Thesis Theme. Our tons of tutorials helped so far more than thousand people sites! I am really proud of that!

    Reply
  • WebmasterWhiz July 3, 2012, 12:03 PM

    This code worked perfectly. I simply had to edit “margin-left” & “margin-top” in custom.css file to make the search box fit properly in the navigation. Thanks a lot for this!

    Reply