Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

This is the code in my searchform.php:

<div class="search-box">
    <form method="get" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
        <label for="s" class="assistive-text"><?php _e( 'Search', 'reddle' ); ?></label>
        <div class="search-input-holder">
            <input type="text" class="field s" name="s" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
        </div>
        <input type="image" src="/images/search.png" alt="Search" class="submit" name="submit" class="searchsubmit"  />
    </form>
</div>

And I use this to call the search box in my templates: <?php get_search_form(); ?>

I would like to use something like value="<?php the_search_query(); ?>" instead of value="Search...", so that on search results pages, the search box is filled with the "search query" instead of the default placeholder text.

The problem with using value="<?php the_search_query(); ?>" is that the search box is blank on all other pages (i.e. there's no placeholder text).

Is there a way to set the default for the_search_query(); so that when it's not a search results page some default text is shown? For example, something along the lines of value="<?php the_search_query( 'Search...' ); ?>" (DOESN'T WORK!)


As of now, this is how I am doing it:

<div class="search-box">
    <form method="get" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
        <label for="s" class="assistive-text"><?php _e( 'Search', 'reddle' ); ?></label>
        <div class="search-input-holder">

            <?php if ( is_search() ) { ?>
            <input type="text" class="field s" name="s" value="<?php the_search_query(); ?>" onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />

            <?php } else { ?>
            <input type="text" class="field s" name="s" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
            <?php } ?>

        </div>
        <input type="image" src="/images/search.png" alt="Search" class="submit" name="submit" class="searchsubmit"  />
    </form>
</div>
share|improve this question

3 Answers 3

up vote 3 down vote accepted

Do not hard code a value in the search field. You will get a lot of nonsense searches because people do not expect that they have to clean up the field before they can actually type something into it. They will just type and hit enter.

Alternatives:

  1. Use the placeholder attribute. You can style it separately.

    <input placeholder="<?php _e( 'Search' ); ?>">
    
  2. Use nothing. If your users need a text inside of the field to realize that it is a search field your page design is broken. Fix the design, don’t add clutter.

share|improve this answer
    
Useful links (from chat): #16538 and #19579 –  its_me Jul 4 '12 at 13:12

You can add a filter to the_search_query().

add_filter( 'the_search_query', 'wpse_search_q_filter' );
function wpse_search_q_filter( $query ) {
    if( empty( $query ) )
        $query = 'Search...';

    return $query;
}

This will allow you to use value="<?php the_search_query(); ?>" in your form.

share|improve this answer

You can use a tertiary if statement in the value attribute to accomplish this. It is the same idea as your second block of code, but without the duplicate inputs, e.g.

value="<?php echo is_search()? get_search_query() : 'Search...'; ?>"
share|improve this answer
    
Worked like a charm :) –  its_me Jul 4 '12 at 6:25

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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