WordPress Search Form without Search Button

This article explains a method for displaying a WordPress search form without a search button. The user simply enters they text they would like to search for, and hits enter. While this is easy to do with the use of a hidden submit button, this method also allows for the use of a default message in the search box (such as “Enter your search”), which keeps you from having to display a label next to the form explaining what it is for. This default message automatically clears when the user clicks to start typing, and puts itself back if the user clicks away. This allows you to have a search form that looks nice and clean, and is still just as functional.

The code

(extra newlines have been added to the code to make it fit the page properly)

<?php $search_text = "Search"; ?> 
<form method="get" id="searchform"  
action="<?php bloginfo('home'); ?>/"> 
<input type="text" value="<?php echo $search_text; ?>"  
name="s" id="s"  
onblur="if (this.value == '')  
{this.value = '<?php echo $search_text; ?>';}"  
onfocus="if (this.value == '<?php echo $search_text; ?>')  
{this.value = '';}" /> 
<input type="hidden" id="searchsubmit" /> 
</form>

Usage

Most WordPress themes have a file called searchform.php which contains the code that generates the search form. All you generally have to do is replace the existing code with the code above.

For themes without the searchform.php file, you can place this code directly into your theme files, wherever you would like the search to go.

Changing the default text

To change the default text of the form, you just have to configure the $search_text variable in the first line of the code.

Styling the form

Using CSS, it is easy to adjust your form. For example, if you want to define the exact width of the search field, you could wrap a div around it like this:

<div class="search-form">
(form code goes here)
</div>

And then in your CSS file, add the following:

.search-form input {
  width: 150px;
}

Example

You can see an example of this method in the left sidebar of this website.

  If you have found this page useful, please consider donating. Thanks!