[Resolved] Customizing the search page

[Leo]

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.

[David]

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;
}

[Leo]

It works perfectly. Thank you very much, David! 🙂

[David]

Glad to be of help!

[Author]

Posts