In a Wordpress theme (using get_search_form()), how can I add placeholder text to the search box?

Question

I am trying to create a theme and I am displaying a search box in the header using:

<?php get_search_form(); ?>

Is there a way that I can get placeholder text to show in that box?

Mercury

related docs: developer.wordpress.org/reference/functions/get_search_form – Writhen

Answer 1

I ended up figuring out that if I don't have a file called "searchform.php" in my theme folder, Wordpress displays is default form that doesn't include any placeholder text:

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>

I created a new file called "searchform.php" in my theme folder and modified the default form to include the placeholder text:

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div>
        <input type="text" value="" name="s" id="s" placeholder="Search gear, clothing, & more.." />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>

Mercury

Answer 2

make searchform.php in theme folder and place that code in it

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<div>
<input class="text" type="text" value=" " name="s" id="s" />
<input type="submit" class="submit button" name="submit" value="<?php _e('Search');?>" />
</div>
</form>

Change whatever you want ! like class,placeholder,text any thing you want but not change like name, id and form attribute

Thanks

Motherly

Nice! Didn't know this way. Thanks, @Vishal! – Plotkin

Answer 3

The WP codex has an example with a placeholder:

If your theme supports HTML5, which happens if it uses add_theme_support('html5', array('search-form')), it will output the following HTML form. This is the case since WordPress 3.6.

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
    <label>
        <span class="screen-reader-text">Search for:</span>
        <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
    </label>
    <input type="submit" class="search-submit" value="Search" />
</form>

If you don't want to use HTML5 tags and attributes, you can create placeholders with JavaScript.

Bugger

Answer 4

The official get_search_form explained the more flexible modified that could add in your funtions.php.

check out here with CodeX commit.

TL;DR

Checkout the code below.

function wpdocs_my_search_form( $form ) {
// replace the new form on your own.
    $form = '<form role="search" method="get" id="searchform" class="searchform" action="' . home_url( '/' ) . '" >
    <div><label class="screen-reader-text" for="s">' . __( 'Search for:' ) . '</label>
    <input type="text" value="' . get_search_query() . '" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search' ) .'" />
    </div>
    </form>';
 
    return $form;
}

add_filter( 'get_search_form', 'wpdocs_my_search_form' );

Slung