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.
Related Tutorials:
- How to Add Google Custom Search Box in Navigation Menu
- How to Add Feedburner Feed Reader Count Button in Thesis Nav Bar?
- Thesis Theme Customization For navigation Menu Round-Up
- How to add Background Image in Thesis Theme Navigation Menu
- How to Add Categories and Dropdown Categories in Thesis theme Navigation Menu
{ 63 comments… read them below or add one }
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 ?
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.
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.
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.
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.
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.
This tips help me to earn 5 USD
Hi Tanmoy, Glad our tips help you to earn also.
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
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.
Worked great!
thanks
Tony
Glad it worked.
You may missed any part of the javascript.
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’);
Sorry… code below.
// Remove Thesis Navigationremove_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');
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.
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
Hi TIa, I am glad you found the solution in minutes.
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/
Hi brat,
Once again copy and paste the code. You will now get click-able search box.
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!
.custom .search { margin-top:-2.7em; } in this code change -2.7 into -3em
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?
I saw your site, there is no search box. If it is available, we can check otherwise we can’t check.
hai jacky,
I saw your site which is not in live.. when its come to live i will check it..
you can visit yourwinningwebsite.com, another site of mine to check it out. thanks for the quick reply, like lightening!
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..
Thank you, would you be able to tell me what the code would look like, i am a beginner. thank you so much!
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..
i will put post soon.
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
hai,
This tutorial may help you to get an idea to add background color , text font change and etc..
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*/
}
hai,
what conflict you are facing.. tell me clearly what you need?…
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.
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..
I would also like to know how to change the Thesis Search Box Text, “To Search, type and hit enter” to something else?
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…
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.
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..
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’);
nice written . well informative article. i saw it operation on this blog too . nice written info man. thanks for posting.
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.
hai kellyhicks,
I checked your site.. I think you have finished the nav bar alignment..
If not just mention what you need..
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.
have you fixed the issue? If not, contact me via contact form. THanks
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-
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
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
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
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.
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
These codes didn’t work for me. I did get a search box, but the code also created a duplicate navigation bar.
Yay! This is exactly what I needed! Thank you for taking the time to explain this thoroughly in both text and video
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
How can you add twitter counter (http://twittercounter.com/) button in the nav bar?
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. .
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
someone who uses and designs frequently on the blogspot platform, can answer you. I am not experienced on this.
thanks man just i will try this is the beauty of life you should try thanks a lot
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?
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”
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.
{ 1 trackback }