Create a Custom Search Box with Thesis

I’ve been working on realigning my blog a bit the past two days. It is running on Thesis, which I am treating more as a WordPress framework than a theme, so I’ve been doing quite a bit of work to get rid of the default look and feel that the theme comes with.

A huge bonus of using Thesis is that most of the typography decisions are made with the theme’s control panel, so that gives me a chance to work on little details, like the search box. So, how’d I make a fancy search box?

First, lets get one thing straight: This is not a custom search box in terms of markup. This is the exact same, default XHTML that Chris includes with Thesis, all I did was position it where I wanted in the theme and style it to look the way I wanted.

Step 1: Add the Search Box to Your Theme

Using Thesis’ hooks you can position the search box anywhere: within the navigation, inside a sidebar, even inside every single post (I wouldn’t recommend that). I positioned it to the right of my tabs.

// Remove default navigation
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
 
//Create my new markup
function bleikamp_nav() {
	echo '<div id="nav">';
	echo '<div class="nav_container">';
	thesis_nav_menu(); // Default navigation tabs
	thesis_search_form(); // The default search function
	echo '</div>'; 
	echo '</div>'; 
}
 
// Hook in my new navigation + search
add_action('thesis_hook_before_header', 'bleikamp_nav');

What am I doing here?

1. I disable the default Thesis navigation because I want to wrap it in my own containers
2. I create my new navigation function. I actually reuse the Thesis function I disabled (thesis_nav_menu) and drop in the default search box (thesis_search_form).
3. I hook my new navigation + search function into the theme before the header.

Step 2: Style It

#s {
     float: right;
     background: url("images/bkg_search.png") 0 0 no-repeat;
     color: #fff;
     padding: 6px 10px 6px 30px;
     width: 156px;
}

This is where all the “magic” happens. Until you add this CSS, you have a boring looking search box sitting right next to your tabs.

I floated the search box to the right hand side of the navigation container. The tabs are floated to the left side.

I add a background image to the search box, which is how I achieve the rounded corners and get the icon into it.

I set the text color to white, since I am using a dark background.

The padding is important. I am using shorthand CSS, so the numbers mean top, right, bottom, left. The search box is still square as far s the browser is concerned, so the padding helps us position the text correctly on top of our background image.

• The top and bottom padding are what center the text in the box and display the entire height of the image.
• The left and right padding keep the text from running over the icon or running too far into the curves and looking “off.”

Will this work on all browsers?

I have no idea, I didn’t test it. But in general my code is completely functional in every browser, but may not look perfect. There are more “bulletproof” ways to do this, but this is my personal site and I am basically designing this for people who use modern browsers.

Also, this CSS is not unique to Thesis and can be used to style any text input you want.