Replace watermark text from searchbar html

I would like to change the placeholder and tooltip text on my search bar.

The search box looks like the image below. In other words, I would like to change “Search …” and “Search for:” to something else.

Here is the relevant code from searchform.php:

 <div class="search-wrapper">

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">

    <label>

        <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label', 'Tesseract' ) ?></span>             

        <input type="search" class="search-field placeholdit" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label', 'Tesseract' ) ?>" />

    </label>

    <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'Tesseract' ) ?>" />

</form>

I found out that replacing “Search for:” changes the tooltip text but how to change the placeholder?

Answer

You could try add placeholder="New text" to input type="search" element.

Additionally you could lookup whether you have some additional javascript that reacts with the element or its class (e.g. with class placeholdit).

Advertisement

Answer