Add Snippet To Project
Have you ever searched for something on a website and wished that the search results would stand out more? When it comes to user experience, it’s important to ensure that the search results are easily distinguishable and visible to the users. One effective way to achieve this is by highlighting the search term within the search results. In this article, we will explore different methods and techniques to highlight search results on your WordPress website, making it easier for users to find exactly what they’re looking for.
function wpturbo_highlight_search_result($text) {
if (is_search()) {
$search_query = get_search_query();
$highlighted_text = '<span class="highlight">' . $search_query . '</span>';
$text = str_replace($search_query, $highlighted_text, $text);
}
return $text;
}
add_filter('the_content', 'wpturbo_highlight_search_result');
The code snippet above demonstrates how to highlight search results on a WordPress website. By using the wpturbo_highlight_search_result() function and the the_content filter, we can modify the content and add a CSS class to highlight the search query.
Let’s break down the code step by step to understand how it works.
First, we define the wpturbo_highlight_search_result() function. This function takes the $text parameter, which represents the content that will be modified. Inside the function, we check if the current page is a search page by using the is_search() function. If it is indeed a search page, we proceed with highlighting the search query.
To obtain the search query, we use the get_search_query() function, which retrieves the user’s search query from the URL. We store the search query in a variable called $search_query.
Next, we create a new variable called $highlighted_text and concatenate the search query within HTML tags. In this case, we use a <span> element with a CSS class of "highlight" to distinguish the highlighted text. You can modify the CSS class and styling according to your preference.
To replace the original search query with the highlighted version, we use the str_replace() function. This function takes three parameters: the search query, the highlighted text, and the original content. It replaces all occurrences of the search query in the content with the highlighted version.
Finally, we return the modified content by using the return statement. This ensures that the modified content is displayed on the webpage.
To apply the highlighting to the appropriate content, we need to hook the wpturbo_highlight_search_result() function to the the_content filter. By using the add_filter() function, we specify the filter name and the function that will be executed when the filter is applied. In this case, every time the the_content filter is used, the wpturbo_highlight_search_result() function will be executed.
By following these steps, the search query on your WordPress website’s search results page will be dynamically highlighted with the specified CSS class.