how to change search results page view

Hi there,

Try adding this snippet:

function highlight_search_term( $text ) {
    if ( is_search() && in_the_loop() && is_main_query() ) {
        $search_term = get_search_query();
        if ( ! empty( $search_term ) ) {
            $text = preg_replace(
                '/(' . preg_quote( $search_term, '/' ) . ')/i',
                '<strong class="search-highlight">$1</strong>',
                $text
            );
        }
    }
    return $text;
}
add_filter( 'the_excerpt', 'highlight_search_term' );
add_filter( 'the_title', 'highlight_search_term' );

Adding PHP: https://docs.generatepress.com/article/adding-php/

It would work for the default search result template, but it seems you are using a loop template for the search result page.

However, your search result template only contians a title, no content or excerpt, is that intended?

If so, I don’t see a point in highlighting the search term, as no title includes the search term in the example you gave us.

[screenshot removed]

Can you add a text block below the title headline block?

And set its dynamic tag to excerpt?

Yes.

1. Add CSS class highlight-search-term to the title headline block and the excerpt text block.
Adding CSS class(es): https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

2. Add this PHP code:

add_filter( 'render_block', function( $block_content, $block ) {

    if ( 
        is_admin() || 
        ! is_search() || 
        ! is_main_query() || 
        empty( $block['attrs']['className'] ) || 
        strpos( $block['attrs']['className'], 'highlight-search-term' ) === false
    ) {
        return $block_content;
    }

    $search_term = get_search_query();

    if ( ! $search_term ) {
        return $block_content;
    }

    return preg_replace(
        '/(' . preg_quote( $search_term, '/' ) . ')/iu',
        '<strong class="search-highlight">$1</strong>',
        $block_content
    );

}, 10, 2 );

Adding PHP: https://docs.generatepress.com/article/adding-php/

It’s working.

However, the title’s font-weight is set to 700, and the highlighted text is also set to 700, so it can not be seen.

The font-weight for the title is from global style .gbp-card__title.

However, I’m not sure if the font family you are using actually has the 700 variant.

Can you check?

I see, can you try updating the code to this?

add_filter( 'render_block', function( $block_content, $block ) {

    if (
        is_admin() ||
        ! is_search() ||
        ! is_main_query() ||
        empty( $block['attrs']['className'] ) ||
        strpos( $block['attrs']['className'], 'highlight-search-term' ) === false
    ) {
        return $block_content;
    }

    $search_term = trim( get_search_query() );
    if ( ! $search_term ) {
        return $block_content;
    }

    libxml_use_internal_errors( true );

    $dom = new DOMDocument();
    $dom->loadHTML( '<?xml encoding="utf-8" ?>' . $block_content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );

    $xpath = new DOMXPath( $dom );

    foreach ( $xpath->query( '//text()' ) as $text_node ) {

        if ( stripos( $text_node->nodeValue, $search_term ) === false ) {
            continue;
        }

        $new_html = preg_replace(
            '/(' . preg_quote( $search_term, '/' ) . ')/iu',
            '<strong class="search-highlight">$1</strong>',
            $text_node->nodeValue
        );

        $fragment = $dom->createDocumentFragment();
        $fragment->appendXML( $new_html );

        $text_node->parentNode->replaceChild( $fragment, $text_node );
    }

    return $dom->saveHTML();

}, 10, 2 );

Yes, I’ve removed it 🙂

Glad it works!