Change Placeholder for Search Box (Old Astra Header)
|
/ Documentation /Custom Code Snippets/Astra Header & Footer Filters/ Change Placeholder for Search Box (Old Astra Header)

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 doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

Need help? Contact Support
On this page

Download is Just A Click Away!

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

This field is required.

REWIND

YEAR IN REVIEW

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