[Resolved] Enter predefined text in searchbox

[xdaniel]

Hi Tom,

is there a way to enter some predefined text into the searchbox like “Enter your searchterm here” which will be deleted when you click into the field?

Best, Daniel

[tenchystryder]

I used something like this.

Original line

<input type="text" class="textfield" name="q" size="24" />

replace with (change as required)

<input type="text" class="textfield" name="q" size="24" value ="CHANGE THIS TEXT" onfocus="if(this.value=='CHANGE THIS TEXT')this.value=''" />

You might have to play with it but don’t alter the original searchform.php file

[Tom]

Hi there,

Give this function a try:

add_filter('generate_search_placeholder','generate_custom_search_placeholder');
function generate_custom_search_placeholder() 
{
      return 'Enter your search term here';
}

Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/

[xdaniel]

Thanks for your reply. Where shall I change it, when don’t alter the original file?

[xdaniel]

@Tom: Sorry, this does not work. Have a look at: http://www.beb-ev.de

[Tom]

Ah, are you trying to add it to the navigation search?

[xdaniel]

yes.

[Tom]

You can overwrite the entire function in your child theme:

if ( ! function_exists( 'generate_navigation_search' ) ) :
/**
 * Add the search bar to the navigation
 * @since 1.1.4
 */
add_action( 'generate_inside_navigation','generate_navigation_search');
function generate_navigation_search()
{
	$generate_settings = wp_parse_args( 
		get_option( 'generate_settings', array() ), 
		generate_get_defaults() 
	);
		
	if ( 'enable' !== $generate_settings['nav_search'] )
		return;
			
	?>
	<form method="get" class="search-form navigation-search" action="<?php echo esc_url( home_url( '/' ) ); ?>">
		<input type="search" placeholder="YOUR PLACEHOLDER HERE" class="search-field" value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="<?php _ex( 'Search', 'label', 'generatepress' ); ?>">
	</form>
	<?php
}
endif;

[xdaniel]

Yes that did the trick! Thousand thanks! I did it with “Code Snippets” instead of the childtheme. One more question. If I want this text white, what can I do?

[xdaniel]

Found a solution here: https://css-tricks.com/snippets/css/style-placeholder-text/

[Tom]

Glad that worked – and thanks for posting the CSS solution 🙂

[Author]

Posts