No results found. Try again with different words?

Search must be at least 3 characters.

Change Placeholder for Search Box (Old Astra Header)

Using the Astra Theme with old header options (Header Footer Builder is available since Astra theme version 3.0) and Astra Pro Addon, you can add a search box to your Primary Menu. The placeholder that is used here is “Search” by default.

Astra Search Box Default Placeholder

You can change it to any text by adding a custom code. To do this, please add the following code to your Astra Child theme’s functions.php file:

function astra_get_search_form( $echo = true ) {

    $form = '<form role="search" method="get" class="search-form" action="' . esc_url( home_url( '/' ) ) . '">
        <label>
            <span class="screen-reader-text">' . _x( 'Search for:', 'label', 'astra' ) . '</span>
            <input type="search" class="search-field" ' . apply_filters( 'astra_search_field_toggle_data_attrs', '' ) . ' placeholder="' . esc_attr_x( 'My custom text', 'placeholder', 'astra' ) . '" value="' . get_search_query() . '" name="s" role="search" tabindex="-1"/>
        </label>
        <button type="submit" class="search-submit" value="' . esc_attr__( 'Search', 'astra' ) . '"><i class="astra-search-icon"></i></button>
    </form>';
  
  // Replace My Placeholder with your desired string.

    $result = apply_filters( 'astra_get_search_form', $form );

    if ( null === $result ) {
        $result = $form;
    }

    if ( $echo ) {
        echo $result;
    } else {
        return $result;
    }
}

To set your desired placeholder text, just replace the words My custom text with your text in the following part of the code:

...
<input type="search" class="search-field" ' . apply_filters( 'astra_search_field_toggle_data_attrs', '' ) . ' placeholder="' . esc_attr_x( 'My custom text', 'placeholder', 'astra' ) . '" value="' . get_search_query() . '" name="s" role="search" tabindex="-1"/>
...

In case you are using Astra Search Shortcodes, or you added the search feature to your Above or Below Header, the code will work only with the “Slide” search style.

If you need to change the placeholder with other Search styles, please add one of these codes instead. Add the code based on the style you want to use:

  • for “Full-Screen” Style:
function full_screen_search_placeholder( $strings ) {
    $strings['string-full-width-search-placeholder']   = 'My custom text';
    return $strings;
}
add_filter( 'astra_default_strings', 'full_screen_search_placeholder', 99 );
  • for “Header Cover” Style:
function header_cover_search_placeholder( $strings ) {
    $strings['string-header-cover-search-placeholder']   = 'My custom text';
    return $strings;
}
add_filter( 'astra_default_strings', 'header_cover_search_placeholder', 99 ); 
  • for “Search Box” Style:
function search_box_placebolder( $form ) {
    $form = str_replace( 'placeholder="Search &hellip;"', 'placeholder="My custom text"', $form );
    return $form;
}
add_filter( 'astra_get_search_form', 'search_box_placebolder' ); 

Same as with the first code, to set your desired placeholder text, just replace the words My custom text with your text in the bolded part of the code.

Was this article helpful?
Did not find a solution? We are here to help you succeed.

Related Docs

Astra is Free. Now & Forever.

We believe creating beautiful websites should not be expensive. That's why Astra is free for everyone. Get started for free and extend with affordable packages.

REWIND

YEAR IN REVIEW

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form
Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form