[Support request] Placeholder text not appearing on search box

[Cori]

I’m trying to wrap up my site at https://www.staging5.writtenpalette.com/ and my issue is the search box. I have Placeholder text in and it shows up in the HTML but not in the input field. I used this (and various variations) to attempt to display the text.

.navigation-search input[type="search"]::placeholder {
    color: #fff;
}

So why is the input blank?

[Fernando]

Hi Cori,

To clarify, are you referring to this Search input box?: https://share.getcloudapp.com/YEukkOdY

If so, as shown in the screenshot, there’s no placeholder in the HTML yet.

If you would like to add a place holder, here’s a snippet you may try: https://docs.generatepress.com/article/generate_navigation_search_output/#add-a-placeholder

Adding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets

Kindly let us know.

[Cori]

That’s the code I used. But it’s not showing up in the resulting HTML after inserting it into functions.php.

[Fernando]

There may an issue with your code or one of your codes in functions.php.

The search form is being duplicated 4 times.

Do you have other custom code in functions.php? Can you try temporarily removing them?

It would be good to take a backup of your site before doing so.

Kindly let us know how it goes.

[Cori]

No. I did have the same code in the main GP theme’s functions.php by mistake but that’s been deleted.

This is the entirety of the functions.php in the child theme.

/* Preload Featured Image */
add_action( 'wp_head', function(){
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full'); 
echo '<link rel="preload" as="image" href="'.$featured_img_url.'"/>';
});

add_filter( 'generate_navigation_search_output', function() {
    printf(
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" placeholder="Search this website" class="search-field" value="%2$s" name="s" title="%3$s" />
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' ) 
    ); 
} );

add_filter( 'generate_navigation_search_output', function() {
    printf( // WPCS: XSS ok, sanitization ok. 
        '<form method="get" class="search-form navigation-search" action="%1$s"> <input type="search" class="search-field" value="" name="s" title="%2$s" /> </form>', 
        esc_url( home_url( '/' ) ), 
        esc_attr_x( 'Search', 'label', 'generatepress' ) );
} );

[Fernando]

You’re filtering it twice with the other filter overriding the first one. The overriding filter doesn’t have a placeholder set.

Try removing this filter:

add_filter( 'generate_navigation_search_output', function() {
    printf( // WPCS: XSS ok, sanitization ok. 
        '<form method="get" class="search-form navigation-search" action="%1$s"> 
			<input type="search" class="search-field" value="" name="s" title="%2$s" /> 
		</form>', 
        esc_url( home_url( '/' ) ), 
        esc_attr_x( 'Search', 'label', 'generatepress' ) );
} );

Kindly let us know how it goes.

[Cori]

That was the solution. Thanks so much for helping out.

[Fernando]

You’re welcome Cori!

[Author]

Posts