Add a search box to the thematic menu

Cristian — Tue, 14 Apr 2009 23:53:46 +0000

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');
php>
 
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.phpem>:
 
<pre lang="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 to content', 'thematic'); ?>a>div>
             wp_page_menu('sort_column=menu_order') ?>
 
			<div id="access-search">
				<form id="searchform" method="get" action="">
					<div>
						<input id="s" name="s" type="text" value="$_GET['s']), true) ?>" size="20" tabindex="1" />
						<input id="searchsubmit" name="searchsubmit" type="submit" value="" tabindex="2" />
					div>
				form>
			div>
 
        div>
 }
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!

Cozmoslabs » search box

Add a search box to the thematic menu