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 Background Image in Thesis Theme Navigation Menu
- How to Add Google Custom Search Box in Navigation Menu
- How to Change the Header Image Above nav Menu in Thesis Theme?
- How to add additional navigation menu in thesis theme?
- Seven tips for changing color in Thesis Theme
Article by Pascal sundhar
Pascal sundhar
Pascal has written 108 awesome articles.
Subscribe to feed via RSS or EMAIL to receive instant updates.
Subscribe to our fourblogger You tube channel
Fernando (4)
Sameer (3)
aaslin (2)
Asrul (2)
blogger gurem (2)
Carol (2)
David (2)
issty (2)
Nate (2)
{ 49 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 g-talk. our g-talk id is admin@fourblogger.com
Worked great!
thanks
Tony
Glad it worked.
I set the according instructions, but I can’t click on the Search Box…
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.
http://testsite.bizchickblogs.com/gl/
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.
The Search Box is being covered by the Navigation Bar. The only way is to put the code which I cannot find, because BlueHost sucks and corrupted my CSS files, but it’s 78% for the navigation bar as i remember… and uhms, also the search might require a border unless pascal finds a fix for this…
still thanks for the help you did for my website. you help me learn more into css code, without you my site would have been trashed.
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..
Pascal. Is there a way that I can change the Thesis Search Box Text. For Example, “To Search, type and hit enter” to something else? Make a Tutorial on that.
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
{ 1 trackback }