WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I need to create a search box in my default searchform.php file that has similar behaviour as the default ability in HTML5 with the "placeholder" attribute.

This is what I have in my searchform.php at the moment:

 <input type="submit" id="searchsubmit" value="text" />
 <input placeholder="<?php _e( 'Search here..' ); ?>">

The text 'Search here..' appears in the input and it dissapeard when I start typeing in the input. I need it to dissapear when I click the input.


share|improve this question

closed as off topic by s_ha_dum, Wyck, toscho Jun 7 '13 at 18:04

Questions on WordPress Development Stack Exchange are expected to relate to WordPress within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

up vote 4 down vote accepted

Placeholder by itself will not disappear when you click the text field. I guess you need a bit of Javascript to achieve that.

<input type="text" onfocus="if(this.value=='<?php _e( 'Search here..' ); ?>'){this.value='';}" onblur="if(this.value==''){this.value='<?php _e( 'Search here..' ); ?>';}" value="<?php _e( 'Search here..' ); ?>">
share|improve this answer

Try this, put it into your theme functions file:

function html5_search_form( $form ) { 
     $form = '<section class="search"><form role="search" method="get" id="search-form" action="' . home_url( '/' ) . '" >
    <label class="screen-reader-text" for="s">' . __('',  'domain') . '</label>
     <input type="search" value="' . get_search_query() . '" name="s" id="s" placeholder="Search website" />
     <input type="submit" id="searchsubmit" value="'. esc_attr__('Go', 'domain') .'" />
     return $form;

 add_filter( 'get_search_form', 'html5_search_form' );

Just ensure that you change domain to your own language domain.

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.