Welcome to Dagon Design. In addition to free scripts, WordPress plugins, and articles, we offer a variety of services including custom theme design, plugin creation, and PHP scripting. Contact me for more information.

Updated Saturday, February 21st, 2009 at 1:13pm

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!

Pages: [8] 7 6 5 4 3 2 1 » Show All

  1. thanks for this i am looking this code for wordpress now solve my problem thanks again

  2. I still prefer small search icon. Some people don’t know what to do after with box.

  3. Just Installed it! works like charm. Thanks!

  4. Thanks For Share With us .

  5. Not Very Easy . So Hard .

  6. Thanks a ton, I was looking for something like this since last three days and fortunately I found this tutorial. Successfully placed the search button on my site.

  7. 110
    karababa yusuf

    nice job, thx

  8. Absolutely great, thank you!

    The site is still in developing, but with your help the search form is now in place at the upper right corner of the menubar.

    It’s so great, to be able to find this kind of free information.

  9. 108
    vango

    thanks it works for me. i just wanted a simple search box

  10. sir can you tell me ajax dropdown list for wordpress.

Pages: [8] 7 6 5 4 3 2 1 » Show All

Leave a Comment

Before you comment: If you are having an issue with a script, please make sure you have read the entire article. Also, please read through the comments because most common issues have already been discussed many times. Thanks.


Be sure to wrap all code in <code></code> tags.