WordPress - Highlight the titles and excerpts in the search results.

_Highlight-search-results.md

Search results term highlight for WordPress

This is a simple solution to highlight the title and the excerpt in a search results for WordPress.

It is built using two filter hooks (one for the title, one for the excerpt), a helper function, and some CSS. Simply paste this code into functions.php or into separate files (but include them in your functions.php), add some css styles to your theme (directly with code editor or using some free plugins), and that should be it.

filter-hooks.php

<?php
/**
 * Hook to highlight the title when returning search results
 */
function moveiq_title_highlight_results($text){
	if( is_search() ){
		$sr = get_query_var('s');

		return moveiq_highlight_search_terms( $sr, $text, true );
	}

	return $text;
}

add_filter('the_title', 'moveiq_title_highlight_results');

/**
 * Hook to filter the excerpt functions
 * This hook trims the excerpt to the $length, and also highlights the text if
 * search term was found in the content. If the search term was found in the middle
 * of the content, then it is trimmed in the context, not from the beginning of text
 */
function moveiq_excerpt_highlight_results(){

	global $post;
	$length = 250;

	// Set up search var
	$s = is_search() ? get_query_var( 's', false ) : false;

	// If post has a manual excerpt
	if ( $post->post_excerpt ) {
		if ( $s ) {
			return moveiq_highlight_search_terms( $s, $post->post_excerpt, true );
		}

		return $post->post_excerpt;
	}

	// hack to deal with gutenberg modules and html markup	
	$content = str_replace( '&nbsp;', ' ', $post->post_content );
	$content = wp_trim_words( $content, 99999, '' );

	// If post is shorter than our excerpt length
	if ( strlen( $content ) <= $length ) {
		if ( $s ) {
			return moveiq_highlight_search_terms( $s, $content, true );
		}

		return $content;
	}

	// If search string is found in the content
	if ( $s ) {
		$content = moveiq_highlight_search_terms( $s, $content );

		$position = strpos( $content, '%b' );

		if ( $position - 130 <= 0 ) {
			$excerpt = substr( $content, 0, $length + 8 );
			$excerpt = substr( $excerpt, 0, strrpos( $excerpt, " " ) ) . '...';
		} else {
			$excerpt = substr( $content, $position - 130, $length + 8 );
			$excerpt = '...' . substr( $excerpt, strpos( $excerpt, " " ), strlen( $excerpt ) );
			$excerpt = substr( $excerpt, 0, strrpos( $excerpt, " " ) ) . '...';
		}

		$excerpt = str_replace( ['%b', '%e'], [ "<span class='search-highlight'>", "</span>" ], $excerpt );
	}
	// If not
	else {
		$excerpt = substr( $content, 0, $length );
		$excerpt = substr( $excerpt, 0, strrpos( $excerpt, " " ) ) . '...';
	}

	return $excerpt;
}

add_filter( 'get_the_excerpt', 'moveiq_excerpt_highlight_results' );

helper-function.php

<?php
/**
 * Search the given text for a term, if found, insert either full span.search-highlight
 * element, or just surround with %b %e tags.
 */
function moveiq_highlight_search_terms( $sr, $text, $full = false ) {

	$length = strlen( $sr );
	$last_pos = 0;
	$original_strings = [];

	while( ( $pos = stripos( $text, $sr, $last_pos ) ) !== false ) {
		$original_strings[] = substr( $text, $pos, $length );
		$last_pos = $pos + 1;
	}

	$original_strings = array_unique( $original_strings );

	if ( $full ) {
		foreach ( $original_strings as $string ) {
			$text = str_replace( $string,"<span class='search-highlight'>$string</span>", $text );
		}
	} else {
		foreach ( $original_strings as $string ) {
			$text = str_replace( $string,"%b$string%e", $text );
		}
	}

	return $text;
}

style.css

.search-highlight {
	background-color: #ff0;
}