How to Highlight Keywords in Search Results in the_excerpt and the_title

Home » Snippets » How to Highlight Keywords in Search Results in the_excerpt and the_title
0

Created with:

Visibility: 

public

Creator: WPTurbo Team

Customize with WPTurbo AI
X

Add Snippet To Project

New Project
Add To Existing Project

Are you looking for a way to make your search results more engaging and user-friendly on your WordPress site? One effective way to achieve this is by highlighting keywords in the search results, specifically in the_excerpt and the_title. By adding visual emphasis to these important terms, you can grab the attention of your visitors and help them quickly identify the most relevant results. In this article, we will guide you step-by-step on how to implement this feature and enhance the overall search experience on your WordPress site.

					function wpturbo_highlight_keywords($text) {
    // List of keywords to highlight
    $keywords = array('WordPress', 'web development', 'search results');

    // Loop through keywords and add HTML span tags around them
    foreach($keywords as $keyword) {
        $text = preg_replace("/b($keyword)b/i", '<span class="highlight">$1</span>', $text);
    }
    
    return $text;
}
add_filter('the_excerpt', 'wpturbo_highlight_keywords');
add_filter('the_title', 'wpturbo_highlight_keywords');
				

The code snippet provided allows you to highlight specific keywords in the search results, both in the excerpt and the title. This can be useful if you want to draw attention to certain terms or make them stand out for the user.

To achieve this, the first step is to declare a function called wpturbo_highlight_keywords($text). This function takes a string as input, which represents the text that needs to be highlighted.

Next, we define an array called $keywords that contains the keywords we want to highlight. In this example, we have included three keywords: ‘WordPress’, ‘web development’, and ‘search results’. You can add or remove keywords from this array as needed.

After that, we use a foreach loop to iterate over each keyword in the $keywords array. Inside the loop, we use the preg_replace() function to search for each keyword in the $text and wrap it with HTML <span> tags. The <span> tags have a class attribute called "highlight", which can be used to apply styling to the highlighted keywords.

The preg_replace() function uses regular expressions to perform the search and replace operation. The regular expression pattern /b($keyword)b/i is used to match the keyword in a case-insensitive manner. The b represents word boundaries, ensuring that the keyword is matched as a whole word and not as part of another word.

The replacement string '<span class="highlight">$1</span>' wraps the matched keyword with the <span> tags. The $1 represents a back-reference to the matched keyword in the regular expression pattern.

Finally, the modified $text is returned from the function.

To apply this keyword highlighting to the search results, we hook the wpturbo_highlight_keywords() function into the the_excerpt and the_title filters using the add_filter() function. This ensures that the function is called when the excerpt and title are displayed, allowing us to modify the text and highlight the keywords.

By adding these filters, the keywords will be highlighted in both the search results’ excerpts and titles, providing a better user experience and making the important terms more noticeable to the users.

Register an account to save your snippets or go Pro to get more features.