Set default text for the_search_query();

Question

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>

Answer 1

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.

Answer 2

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.

Answer 3

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...'; ?>"