Archived topic
Customizing the search page
3 replies · Started by Leo on March 26, 2022
Hi!
I'm struggling to improve the user experience of my site's search page. I've customized the header using the method David suggests here. It's great! However, I want to achieve two more things.
Please watch the results for the query of the word "clown."
1. I like to change the text within the header to adjust its weight and size with CSS. Is it possible?
2. I want to highlight the searched word of the text within the header-"clown" in the previous example-by setting its color to yellow.
Hi there,
you will probably need to:
1. Create a custom Shortcode by adding this PHP Snippet to your site:
add_shortcode('header_element_search',function(){
ob_start();
printf(
/* translators: 1: Search query name */
__( 'Search Results for: %s', 'generatepress' ),
'<span class="search-query">' . get_search_query() . '</span>'
);
return ob_get_clean();
});2. Then you will need a Block Element - Page Hero dedicated to just the Search page.
3. In the Block Element you would add a Headline Block and in the headline add the shortcode: [header_element_search]
4. You can set the size of the Headline in the block editor.
5. To set the query string color to Yellow needs this CSS to be added to your site:
span.search-query {
color: #fcfc00;
}It works perfectly. Thank you very much, David! :)
Glad to be of help!
