Add the WordPress search function to your Thesis header

UPDATE: 18 November 2011 – Added JavaScript to clear the input field when clicked on.

Today’s Thesis recipe is a quick and simple fix that adds the WordPress search function to the Thesis header. As with any Thesis customization, you’ll need to have the custom_functions.php and custom.css files open.

Step 1 – Add the Search function

Open your custom_functions.php file and copy the following code into it:

function custom_search_widget() { ?>
<div class="widget widget_search">
	<form method="get" class="search_form" action="<?php bloginfo('home'); ?>/">
		<p>
			<input class="text_input" type="text" value="<?php echo $field_value; ?>" name="s" id="s" onfocus="if (this.value == '<?php echo $field_value; ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php echo $field_value; ?>';}" />
			<input type="submit" id="searchsubmit" value="Search" />
		</p>
	</form>
</div>
<?php } 

add_action('thesis_hook_header' , 'custom_search_widget');

To break this down, you’re creating a custom function (custom_search_widget), you’re adding the WordPress search form and you’re telling Thesis (by means of a hook) to add the custom function to the Thesis header.

EDIT: You could also use the ‘thesis_search_form’ function that’s built in to Thesis, which would mean you can skip this function code altogether and simply add the action. I forgot about that one. Only catch is, it doesn’t have a submit button.

Step 2 – Style the Search function

Your search function will work just fine, but it looks lousy. If you’d like to clean it up and e.g. position it on the right hand side of your header, add the following to your custom.css file:

/* clears the header floats */
#header {
	overflow: hidden;
}

/* allows the search function to be positioned to the right of the logo */
#logo, #tagline {
	float: left;
	width: 300px;
}

/* places the tagline below the logo */
#tagline {
	clear: left;
}

/* positions the search widget on the right hand side of the header */
.widget_search {
	float: right;
	width: 200px;
}

/* formats the search input and button */
.search_form .text_input {
	font-size: 11px;
	padding: 5px;
}

.search_form #searchsubmit {
	font-size: 11px;
	padding: 4px;
}

There you have it. Obviously you can style your search form to match your theme, but the bare-bones are here. All that’s needed now is your imagination (and some CSS skills).

If you think these short tutorials are useful or you’d like to request a Thesis recipe, please let me know.