Add a search box to the thematic menu

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! <strong>Now we can create our own menu WITH the search box on the right of it! </strong>Add this code at the end of your <em>functions.php</em>:
// Create a custom access div with the menu and search box
function search_access() { ?&gt;

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!

About Cristian Antohe

Cristian Antohe is the co-founder Cozmoslabs. He's a WordPress developer, web designer and Open Source fanatic. He's part of the team that developed Profile Builder and WordPress Creation Kit and also helps curate wpMail.me.

Find me on: Google + | Twitter

52 thoughts on “Add a search box to the thematic menu

  1. Pingback: Aggiungiamo “cerca” al menu di Thematic | Altamente Decorativo

  2. 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!

  3. 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.

  4. 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?

  5. Wow! I didn’t know Thematic had the functionality built in to target specific browsers. Makes this theme better and better. Thanks!

  6. 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

  7. 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:

  8. Pingback: Hej Internet! - Nya bokmärken

  9. Pingback: Build WordPress Sites Fast With the Thematic Theme Framework | Es Developed - Fresh Website and Graphic Design

  10. 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

    • 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!

  11. Pingback: Thematic: Add a Search box to Thematic menu « My Graphic Friend's blog

  12. 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

  13. 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

  14. Hi, I have used this in my website , hope you can add more info like customizing the search box colors or search button image. Thanks for the help =)

  15. This breaks with the latest update to Thematic. Using Thematic 0.9.7.6 or greater you simply could use the following code and omit the remove_thematic_actions()

    function childtheme_override_access() { ?>

    <a href="#content" title="">

    <form id="searchform" method="get" action="">

    <input id="s" name="s" type="text" value="" size="20" tabindex="1" />
    <input id="searchsubmit" name="searchsubmit" type="submit" value="" tabindex="2" />


    <?php }

  16. Thanks!

    This was a life saver on a project I’m helping with (new design with this trick coming in November).

    Since I’m using 9.7.7, I did it this way to adjust per Gene Robinson’s note above:

    function mysite_new_menu(){ ?>

    <form id="searchform" method="get" action="”>

    <input id="s" name="s" type="text" value="” size=”20″ tabindex=”1″ />
    <input id="searchsubmit" name="searchsubmit" type="submit" value="” tabindex=”2″ />

    <?php }
    add_action('thematic_header','mysite_new_menu',9);

  17. Nice tuto, thx !
    But the thematic menu disapeared with this code, after some grabbin on thematic_acccess function code (header-extensions.php), I manage to make it appear again.

    Here’s the code I use (at your own risk, i’m a noob – ie, feedback welcome) :


    // Create a custom access div with the menu and search box

    function search_access() { ?>

    <a href="#content" title="">

    <form id="searchform" method="get" action="">

    <input id="s" name="s" type="text" value="" size="20" tabindex="1" />
    <input id="searchsubmit" name="searchsubmit" type="submit" value="" tabindex="2" />


    <?php }
    add_action('thematic_header','search_access',9);

    • Yeah, I had the same problem, I just removed the “remove_thematic_action()” and fudged around to get it to show. I will try your code though, because now I have two access divs. eeeek!

    • I know this was a year ago BUT can anyone show me the code they used to make the thematic menu reappear? I used the code shown in the tutorial and it made the search form appear in the access area but my menu was gone. I’m not very good with php and I don’t understand how to fix the code Antoine posted. Any help is greatly appreciated.

      Thanks

  18. Sorry, I paste the wrong code…


    // Create a custom access div with the menu and search box

    function search_access() { ?>

    <a href="#content" title="">

    <form id="searchform" method="get" action="">

    <input id="s" name="s" type="text" value="" size="20" tabindex="1" />
    <input id="searchsubmit" name="searchsubmit" type="submit" value="" tabindex="2" />


    <?php }
    add_action('thematic_header','search_access',9);

  19. I just installed your code into my wordpress site following your instructions and now I can’t access my site and its totally messed up. Can you please tell me why and how to fix it?

    I can’t even access my admin section.

    Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *


× two = 14

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>