A search box in main menu is something a lot of themes have by design. Although this is not the case with the Thematic Theme Framework, it’s easy to customize it with a few lines of code.
First thing we need to do is create a thematic child theme. This way we won’t make direct changes to Thematic.
The search box will be displayed on the right of the menu, inside of the #access div. The way Thematic hooks and actions were constructed will first need to remove the thematic_access() action from the thematic_header() hook. If all this sounds a bit difficult fear not. All you have to do is add this code inside of functions.php file of your child theme (don’t forget the <?php opening tag and the ?> ending tag).
// Remove default Thematic actions
function remove_thematic_actions() {
remove_action('thematic_header','thematic_access',9);
}
add_action('init','remove_thematic_actions');
If everything is working properly when you reload your WordPress installation the entire menu would have disappear! Now we can create our own menu WITH the search box on the right of it! Add this code at the end of your functions.php:
// Create a custom access div with the menu and search box
function search_access() { ?>
<div id="access">
<div class="skip-link"><a href="#content" title="<?php _e('Skip navigation to the content', 'thematic'); ?>"><?php _e('Skip to content', 'thematic'); ?></a></div>
<?php wp_page_menu('sort_column=menu_order') ?>
<div id="access-search">
<form id="searchform" method="get" action="<?php bloginfo('home') ?>">
<div>
<input id="s" name="s" type="text" value="<?php echo wp_specialchars(stripslashes($_GET['s']), true) ?>" size="20" tabindex="1" />
<input id="searchsubmit" name="searchsubmit" type="submit" value="<?php _e('Search', 'thematic') ?>" tabindex="2" />
</div>
</form>
</div>
</div><!-- #access -->
<?php }
add_action('thematic_header','search_access',9);
Reload your page and the search box will be there, but not where you expected it to be! We’ll need to add a bit of css styling to it.
Go ahead and open the style.css and at the end of it add this css code:
#access-search{
position:absolute;
left:50%;
width:260px;
margin-left:170px;
height:29px;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
padding:2px 0 0 4px;
}
This is it! You now have successfully added a search box to the right of your thematic main menu!
35 Comments
Great work Cristi!
Thank’s Danny!
Great little tutorial. Thanks so much!
b
Thank you very much!
Hey…first part works great!
Not too much luck with the second part…
I get the following error
Parse error: syntax error, unexpected ‘?’ from the first line of the second function?
function search_access() { ?>
Thanks for your help!
Something went wrong with the syntax highlighter and all sort of characters appeared in the code. I’ve updated the code on this page. Please try again and tell me if it worked for you.
Works perfectly!
Thanks for all of the help…
The code works great and displays correctly in IE8, Firefox 3.5, and Opera 9.64 in Windows Vista.
However, in IE6 in Windows XP, IE7 in Windows XP, and Safari 4.02, the menu displays about 50 pixels below where IE8/Firefox 3.5/Opera 9.64 display.
I know I can target IE6 and IE7 with conditional comments, but don’t know any way to target Safari.
Do you have suggestions for how to resolve the drop?
I know about the bug in IE, just that I never had a chance to fix it.
To target different browsers is actually easy to do. Thematic has a body class. If you open the source code of your site (where you’re using thematic) and you have a look at the
tag you’ll see it has a lot of classes. The last class it’s the browser class. So if you’re on firefox the body will also have the class: firefox ff3, and if you’re on IE7 the body will have the class ie7.Now you just have to target the css you need like:
.ie7 #access-search {
/*code for IE7 only*/
}
This way you won’t have to use hacks.
Thanks Cristi.
What I discovered was missing in the CSS styles above was the “position: relative” on the container of the search box. Without “position: relative”, the “position: absolute” on the “access-search” will not position correctly.
Once I added “position: relative” to the “access” div, the “access-search” box positioned correctly.
I did use conditional comments to target IE initially, but discovered I didn’t need the conditional comments once I added “position: relative.”
A question for you: how would you add the search box to the .menu div, as Ian did in his “The Break” theme used on the http://www.themeshaper.com site?
Wow! I didn’t know Thematic had the functionality built in to target specific browsers. Makes this theme better and better. Thanks!
@Cristi,
Thanks a lot for posting this function. It’s exactly what I needed in my Thematic child theme!
I understand all of this and it works great, but my question (maybe a little off-topic) is while I know what the third attribute (the number 9 in this instance) indicates the position, how do we determine what number should be used there?
Mike
Is it correct/appropriate to use the following code in place of your provided code to insert the search box? I’m calling thematic_search_form() instead of building the form from scratch:
// Create a custom access div with the menu and search box
function search_access() { ?>
<a href="#content" title="">
<?php }
add_action('thematic_header','search_access',9);
The functionality seems to work just fine. Is one method preferable over the other?
I’m having a little trouble styling the new search box. I have added the following to hide the search button:
#access-search #searchsubmit { /* Hide "Search" button */
display: none;
That’s about as far as I have gotten with the styling…
Oops. Looks like the code didn’t come through properly on my comment above. Basically, I’m replacing:
<input id="s" name="s" type="text" value="" size="20" tabindex="1" />
<input id="searchsubmit" name="searchsubmit" type="submit" value="" tabindex="2" />
with:
Hmm…frustrating. Basically instead of building the form I’m calling the thematic_search_form() function. But, I can’t figure out how/where to style it.
Sorry for the multiple comments…
Look click view source in your browser and see that html that function generates. After that write css for it.
Hey Cristi
How do I add placeholder text in the searchbox?
Thanks
Hi Guys,
Im getting two problems? Any Help?
FRONTEND:
Warning: call_user_func_array() [function.call-user-func-array]: First argumented is expected to be a valid callback, ‘search_access’ was given in /homepages/31/d239607629/htdocs/wordpress/wp-includes/plugin.php on line 339
BACKEND:
Warning: Cannot modify header information – headers already sent by (output started at /homepages/31/d239607629/htdocs/wordpress/wp-content/themes/gallery/functions.php:10) in /homepages/31/d239607629/htdocs/wordpress/wp-includes/pluggable.php on line 850
So,,, I got this baby working! However, how do we display the results like gallery too?
http://www.1001vectors.com is address, helllp!
Joe
Looks Good.
I’m not sure, but probably you should replace the search loop with the index loop. I’m presuming this was done using hooks and filters inside the “Gallery Theme” functions.php. I never worked with this child theme so I can’t really help you!
Can you help me! If you can see all the code?
Joe
I would suggest you ask the original developer of the Gallery Child Theme. He would be more qualified to answer your questions:
http://www.chris-wallace.com/2009/05/04/gallery-wordpress-theme/
Really cool use of Thematic hooks and filters! Just applied it to a Thematic child theme I’m developing. Thanks Cristian!
Cool! Really happy to hear you’re starting to work with Thematic!
Maybe you can send me an email with a link to it when it’s done
Cheers.
Could you please advise me. I am getting a seriously bizzare error in IE7 with the search bar, it’s moving down below the aside and into the main div.
WP 2.9.1
Thanks,
Aaron
Add this to the css:
.ie7 #access-search {
margin-top:-32px;
}
THANKS!
i have follewed the above and just can not get my search box to line up with the menu. I started by copy&paste your code & have then tried to amend the css. But just can not get it to move up to be in line with the menu.
the thematic child theme is at:
http://www.51degreesnorth.net/framework/
can u help?
what am i missing?
btw many thanks for the tutorial – got me started of where to look to change things
Hi Joe,
I just went to your site to take a look and didn’t see the search box you’re referring to above. Maybe you’ve taken the code out?
that’s what i was wondering 4 a bit! – but if you hit the tab key you see it appear, it is there just hidden.
Hey Joe,
In the css for #access-search, try adding this declaration:
margin-top:-32px;
That should get you headed in the right direction…
cool you’re a gent, works a treat
thanks alot
joe
still works on 2.9.2
thanks!
thanks for this. now to read it and understand why it happened.
4 Trackbacks
[...] Articolo scritto da Cristi con il titolo Add a search box to the Thematic menu. Tradotto con il consenso dell’ Autore. [...]
[...] bokmärken 22 March 2009 | Länkar | Niklas Jakobsen | Inga kommentarer Add a search box to the thematic menu Felipe Skroski » 3 Level navigation menu in wordpress Crazy Egg – visualize your [...]
[...] Add a Search Box to the Thematic Menu [...]
[...] Thematic: Add a Search box to Thematic menu http://www.cozmoslabs.com/2009/04/15/add-a-search-box-to-the-thematic-menu/ [...]