In this tutorial, we will see how to add the Search Box on the Navigation Bar of the Thesis Theme for WordPress.
Note: This is tested with Thesis Theme version 1.6. Will not work with the older versions. Contact me via the Comments section and I will help you!
Caution! The code in this tutorial is not guaranteed to work on all hosting and WordPress installations. Please navigate to the last part of this tutorial for the updated code
Using HTML Filters
Here we will take a slightly different approach. Since Thesis Theme provides you only hooks for moving the Navigation menu around – we will not be able to use it directly for controlling the content inside the Navigation menu.
So we will use the filters to parse the HTML code of the Navigation menu and insert the content where we need.
Getting the Code Work Done
Caution! The code in this tutorial is not guaranteed to work on all hosting and WordPress installations. Please navigate to the last part of this tutorial for the updated code
As with every other customization, this tutorial needs changes in the following files:
/custom/custom_functions.php /custom/custom.css
First, let us hit the custom_functions.php file.
We need a handle to get the HTML code, as it is rendered on to the page. So we will have a custom method and this method will get a handle to the HTML code as input. We call this function – ‘thesis_navmenu_search’
// Start buffering after the tag
add_action('thesis_hook_before_html', 'thesis_buffer_start');
function thesis_buffer_start() { ob_start('thesis_navmenu_search'); }
Close the handle, once the page is completely rendered. This is done using the following code.
// Stop buffering before the tag
add_action('thesis_hook_after_html', 'thesis_buffer_stop');
function thesis_buffer_stop() { ob_end_flush(); }
Now let us create the exact function – thesis_navmenu_search. This function will do the following:
- Keep parsing the HTML Code
- When it encounters the Navigation menu – identified by
- Properly close the HTML and return for further parsing
This is a powerful technique – the whole ideology behind the hooks. You can use this to alter anything that Thesis Hooks prevents you from getting into!
Here is the complete code (including the previous snippets) to be copied into your custom_functions.php file.
Caution! The code in this tutorial is not guaranteed to work on all hosting and WordPress installations. Please navigate to the last part of this tutorial for the updated code
// Add Search Box to Navigation Bar
// We use WordPress filters here
// Start buffering after the tag
add_action('thesis_hook_before_html', 'thesis_buffer_start');
function thesis_buffer_start() { ob_start('thesis_navmenu_search'); }
// Stop buffering before the tag
add_action('thesis_hook_after_html', 'thesis_buffer_stop');
function thesis_buffer_stop() { ob_end_flush(); }
function thesis_navmenu_search($buffer) {
// Filter for the header navigation
if(preg_match('/
/* Navigation Bar Search */
.custom ul.menu li.nav_right {
float:right;
height: auto;
overflow:hidden;
font-size:10px;
letter-spacing:1px;
text-transform: uppercase;
}
.custom ul.menu li.search input {
height:25px;
width:200px;
padding:4px 10px 0 10px;
background-color:#FFFFFF;
color:#000000;
font-size:14px;
letter-spacing:1px;
text-transform: uppercase;
}
You might want to change the following 2 parameters – under .custom ul.menu li.search input – in the previous code snippet
- Height and Width
Updated on 15 Jan 2009 and guaranteed to work!
Modified Code – Guaranteed to work!
Copy the following code to your custom_functions.php file:
// Search Box in Navigation Menu
function search_nav_menu() { ?>
Now copy the following to custom.css file:
/* Nav Search */
.custom ul.menu li.nav_right {
float:right;
font-size:10px;
height: 22px;
letter-spacing:1px;
overflow:hidden;
text-transform: uppercase;
}
.custom ul.menu li.search {
background-color: #CCC;
border-bottom:none;
height:25px;
margin-bottom:0;
}
.custom ul.menu li.search input {
background-color: #CCC;
border:1px solid #333;
color:#333;
font-size:10px;
height:18px;
letter-spacing:1px;
padding:4px 10px 0 22px;
text-transform: uppercase;
width:125px;
}
Change custom.css entries suitably to match your Theme and the Navigation Menu appearance.
Here is a sample on one of my sites:
Conclusion
So that’s all about it to add the Search Box into the Navigation menu in Thesis Theme. Let me know how it goes – I love to hear back from people. Also, feel free to contact me if you need any help.
I had to back up my entire site and restore it to a previous day. this script somehow gave me an error message on line 55 of the custom_functions.php
too scared to try it again, but then again, I am not a designer either. I just follow really great directions. so far, your help with the 125×125 ad placement rocked though.
I hope to see more comments about if it worked for anyone else.
Rhea,
I am really surprised that it brought your site down. Are you using Thesis 1.6? Because at the start of the tutorial I mentioned it is only for 1.6.
I have tried it on one of my sandbox sites and it worked well.
https://thoughtsunlimited.net/apps/sandbox/
Let me know if you need help
yeah, I had to have the hosting company give me my site back a day (lost a lot of the customization and had to track back… lol) so that I didn't loose my work
Not sure what happened but scared to try the header/search thing. I wanted to learn how to add my opt in form within my header and above the nav bar (where I hope to have a search engine)
As clever as the PHP in this post is, and hats off to you, thesis_hook_last_nav_item (new in 1.6) might be easier.
Thanks Kristarella. That is really a nice way and will save a lot of work on my current project. Good that you pointed out
I came across a new problem with Nav Menu in Thesis 1.6 (not beta) and I posted it here in the forums – http://diythemes.com/forums/showthread.php?p=80…
Do you have any suggestion on this? Thanks in advance.
When I installed it I get this error:
Parse error: syntax error, unexpected ';' in /home3/thecomq3/public_html/webjourney/wp-content/themes/thesis_16/custom/custom_functions.php on line 128
Do you know how I can fix it?
When I installed it I get this error:
Parse error: syntax error, unexpected ';' in /home3/thecomq3/public_html/webjourney/wp-content/themes/thesis_16/custom/custom_functions.php on line 128
Do you know how I can fix it?
Hello, I am using WP 2.9.1 and Thesis 1.6.
When I copy the code and paste it in custom_functions.php, the site goes down. Since I am not familiar with coding, I don't know if I might be doing something wrong or if there might be a bug somewhere.
Any suggestions?
Nicolas – sorry for the problem you are facing. I am updating this tutorial based on a much simpler code that will work without affecting your site. I will let you know in a day.
Thanks and sorry for any inconvenience
Thanks Ashwin! No trouble at all and thanks for sharing your knowledge and time!!!
Hello Ashwin, did you have any luck trying to find a fix?
Cheers!
Nicolas – I am planning to update the post this weekend with the fix and will also let you know.
Sorry for any problems!
Nicolas,
I have updated the blog post with the working code! You can take it from there. Let me know if it helps you.
You can see a sample working here – https://thoughtsunlimited.net/apps/sandbox/
Thanks!
Nicolas,
I have updated the blog post with the working code! You can take it from there. Let me know if it helps you.
You can see a sample working here – https://thoughtsunlimited.net/apps/sandbox/
Thanks!
Thanks for the update Ashwin! Now seems to work, but everytime I search for something it gives me a 404. I am also trying to figure out how to control the styling, since I am not familiar with code.
I'll keep on trying it and thanks again!!
Thank you! It works like a charm. Sadly I don't know enough code yet to be able to position the searchbox to the far right in my navmenu? I only have 5 buttons and there is a lot of space between the last one and the right pagemargin(end of header/navbar). I would like to position the searchbox flush against the end of my header/navbar and with no padding under it. Is there any way to do this ? I would really appreciate any help.
Great Nicolas!! Let me know once it works…
Peter,
If you used the latest code (see the bottom of the post), the box should automatically position on the far right! Is it not so? Give me the link and let me have a look.
I tried doing this but when I added the code to my custom function file it says there was an error.
First off I would like to say excellent blog! I had a quick question that I’d like to ask if you don’t mind. I was interested to know how you center yourself and clear your mind prior to writing. I have had a difficult time clearing my thoughts in getting my ideas out there. I truly do enjoy writing but it just seems like the first 10 to 15 minutes are generally wasted just trying to figure out how to begin. Any ideas or tips? Cheers!