Have you ever wondered how some sites have text in their search box? This one is pretty easy. All you need to do is modify the searchform.php file, which can be found in your theme’s directory. Let’s use the default theme as an example to make it easier for everyone to see what to do.

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<label class="hidden" for="s"><?php _e('Search for:'); ?></label>
<div>
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

Now let’s change…

<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />

to…

<input type="text" value="Search & Hit Enter" name="s" id="s" onfocus="if (this.value == 'Search & Hit Enter') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search & Hit Enter';}" />

What does all this do? Oh… So very much.

First, it will automatically fill your search box with “Search and Hit Enter”. If you click on the search box, it will disappear and you can enter text. But if you don’t enter text and click out of the box, “Search and Hit Enter” will appear again.