Add the WordPress search function to your Thesis header

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

Add the WordPress search function to the Thesis header

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.

  • http://www.kimwoodbridge.com Kim Woodbridge

    This is great Dave. We really need these straightforward tutorials for Thesis.
    .-= Kim Woodbridge´s last blog ..Upcoming Facebook Changes to Boxes and the Box Tab that Will Impact Your Custom Fan Pages =-.

  • Dave

    Hi Kim, I think that it’s these simple customization elements that keep people from exploring Thesis further. Hopefully 100 or so of these tutorials will help the Thesis community to muster up some unique designs :)

  • http://moderncomfortfood.com barbara

    An excellent tutorial, and it actually works! I’ve had an unhealthy obsession about getting a search submit button into my Thesis themed blog — http://moderncomfortfood.com — since, oh, the day I installed Thesis. And each attempt failed until I saw your tutorial above.

    I have a couple of follow-up questions though:
    1) I want the Thesis search form to stay in its default widget position in the sidebar. But substituting “thesis_hook_before_ sidebar_1″ bumps the search form to the top of the sidebar, where I don’t want it. Any ideas about how I can get the custom.php to apply to the default widget without actually moving it?
    2) I’ve tried various iterations of substituting a 24px x 20px .gif search image for your search submit button — a la background: url (http://…. It’s not quite working. Any ideas?
    .-= barbara´s last blog ..Turkey or Chicken Divan =-.

  • NIraj

    Dave,
    this trick works perfectly but only one thing is, Search button is no click-able but it you try hitting enter it works.
    so how to make Search button click-able?

    Regards,
    Niraj

  • http://www.CharlotteWebDevelopment.com Ted Hessing

    Great tutorial, Dave!

    I think you may have changed your content column width after writing this piece – the header image is still at 800px and is over flowing!

    Thanks for the help!

  • http://www.myonlinetraininghub.com Microsoft Office Online Training

    thanks. I kinda got this workign in the right spot but need to tinker with it a bit until I’m happy.

  • http://backgroundacoustic.com Mark Hockenberry

    Thanks Dave,

    I really like the results of this code except for one issue, The text ” Enter Search…” doesn’t go blank (disappear) when you click in the box to search. Here is my site I want to use this on: http://rightonwebdesign.com
    any suggestions?

  • http://www.zaksurfboards.com Paz

    I used this with great success, however I want the form to sit about 10 pixels from the top of the header. Is there a function that I can add to do that as well.

  • Dave

    @Paz, you’d need to use some custom CSS (in your custom.css file) to achieve this. Depending on your layout, applying the following may help:

    .search_form {margin-top: 10px;)

  • http://www.glopc.com Sarah

    Thanks for the great tutorial Dave.

    I’m trying to move the search bar to the top right corner without losing the clickability and formatting of the two images I have in my header. I’ve tried tinkering around with the CSS to no avail.

    Any suggestions?

  • http://underconstruction Laura

    Hi, would you by any chance know where the search box text ‘to search, type and hit enter’ is hidden, in THESIS, so I could translate it for a project ?
    Thanks much !
    Laura

  • http://www.alisonjardine.com Alison Jardine

    Hello Dave

    Wanted to express my appreciation for this code! I actually managed this all by myself on my site, that’s how good your explanation is :))
    My little search box now appears neatly on the top right of my site, occluding my banner.
    Appreciate you posting this very much….
    Alison

  • ilana

    I tried doing exactly this and it decreased the width of the header (currently using the logo and tagline defaults from thesis) so that the logo is now on two lines as is the tagline. Any help would be greatly appreciated!

  • ilana

    nm. figured it out. THANKS!!!

  • http://www.streamwoman.com beatriz

    thanks for the orientation, i really wanna improve my blog

  • http://www.streamwoman.com beatriz

    i would like to move my search box more to the middle, how do i do this,

  • http://www.galoor.com/ Clint

    Thanks for this tutorial, it’s helped me get past a massive headache today haha

  • http://gastontrussi.com Gaston Trussi

    Great tutorial! after 5 minutes i got it running on my site.
    I would love to see a tutorial about how to make it look better. I like the one you have in your side bar with the loupe pic.
    Thanks a lot

    Gaston

  • Licia

    okay Dave, you’re making Thesis fun w/ your elegant code.
    I’ll be back for more. You’re so good, I’m tempted not to backup my functions file ; )