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.
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 …"', '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.
Note:
For Astra theme after version 3.0.0, the Header Footer Builder simplifies editing placeholder text. You can modify it directly within the customizer. Please refer to the provided screenshot for a better understanding.