Search keyword to be added next to the page title on search page

Hi there,

You need to have a dynamic value fetching get_search_query() value rather than displaying the current page’s title.

Consider this:

You can display the get_search_query() value anywhere with a shortcode.

I’ve written one for you.

add_shortcode('search_term_display',function($atts){
    $atts = shortcode_atts( array(
			'html_tag' => '',
			'class' => '',
			'id' => ''
		), $atts, 'search_term_display' );
	if( empty( $atts['html_tag'] ) ){
		$html_tag = 'span';	
	} else{
		$html_tag = $atts['html_tag'];
	}
	
	if( empty( $atts['id'] ) ){
		$id = '';
	} else{
		$id = 'id="'.$atts['id'].'"';
	}
	
	if( empty( $atts['class'] ) ){
		$class = '';
	} else{
		$class = 'class="'.$atts['class'].'"';
	}
	
	echo '<'.$html_tag.' '.$id.' '.$class.'>'.get_search_query().'</'.$html_tag.'>';
			
});

With this PHP snippet, you can use the [search_term_display] shortcode.

Shortcode usage:

Leaving the shortcode w/o attribute will default to <span>search term here</span> but I’ve coded the shortcode so you’d be able to customize its HTML properly.

Example:
[search_term_display html_tag="h1" class="test" id="test-1"]

this means the term will have <h1> tag with class of “test” with id of “test-1“.

Alright, thank you so much, that worked perfectly for me.

One quick thing. On my search result page, It shows the thumbnail and except only, I want to show thumbnail and title ‘h2’ only. can you help me with this quickly?

Thanks a million!

You have this custom CSS that prevents your title to show up:

.inside-article .featured-image,.entry-header,.comments-area,.entry-meta {
display: none;
}

You should be able to hide the excerpt with CSS:

body.search-results .entry-summary {
    display: none;
}

There’s also a filter for this but that’s for Premium users only. I’m afraid we can’t provide support for GP Premium on this forum. If you have one, you should ask questions here: https://generatepress.com/forums/forum/general-support/

Thank you, Yes I found out.

Also found out that I can add CSS only for a specific page, using filters. I have premium.

Thank you so much!

Nice one. Glad you got it sorted. No problem. ??

Thank you @ejcabquina

I have another problem, can you help me. On the same site, when some search a query, and on the result page, the search field carrying the search query, I want the search field to be blank on the result page, so users won’t have to clear (backspace) and search again.

I searched on WordPress forums but didn’t get a solution. please let me know if that is clear to you?

Thank you again!

You can force the input bar to clear its values after the page reloads with JS.

<script>
var search = document.querySelectorAll('input.search-field');
	for(i=0; i < search.length; i++){
		search[i].value = ''
	}
</script>

This script removes the search field input value onload so the text field always will always have “empty” values.

It didnt worked ??

How did you insert the code?

This should be inserted on your footer. (wp_footer hook)

Ops yes sorry.

I did now in footer hook. It now worked for wp search field, but not the generate block search I think.

Ah that makes sense. It only targets the default search boxes.

Try changing the querySelectorAll value.

Change this line within the code:
var search = document.querySelectorAll('input.search-field');

To this line:
var search = document.querySelectorAll('input[type="search"]');

So the target of the script is more generic to all search fields.

Perfectly worked, thank you so much!

No problem. glad to be of any help. ??