[Resolved] Customizing the search page

Home Forums Support [Resolved] Customizing the search page

Home Forums Support Customizing the search page

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2167781
    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.

    #2167828
    David
    Staff
    Customer Support

    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;
    }
    #2168170
    Leo

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

    #2168176
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.