Saturday , 27 May 2017
Technology News
Home / Wordpress Tricks / Highlight Searched Text in Search Results In WordPress

Highlight Searched Text in Search Results In WordPress

At some instant we need to Highlight searched text in our WordPress Search Results.There are lot of plugin available which is able to handle it. Today we will see how to Highlight Searched text in Search Results in WordPress using code, or modifying search.php. After adding this code in your search.php you don’t need to install any plugin.

 

Highlight Searched Text in Search Results In WordPress

 

I am admitting that I’m not a big fan of the WordPress built-in search engine. One of its weakest features is the fact that searched text aren’t highlighted in the results, so the visitor is unable to see the searched text in the context of your article. This code has been created by Joost de Valk who blogs at www.yoast.com.

 

How To WordPress Highlight Searched Text in Search Results

You need to follow some basic steps given below:

1 ) Open your search.php file and find the the_title() function. Replace it with the following:

echo $title;

2) Now, just before the modified line, add this code:

<?php
$title     = get_the_title();
$keys= explode(" ",$s);
$title     = preg_replace('/('.implode('|', $keys) .')/iu',
'<strong></strong>',
$title);
?>

3) Save the search.php file and open style.css and add following code in you stylesheet

strong.search-excerpt { background: yellow; }

4) That’s all you are done. Now, the searched text will be highlighted in your search results.

 

How Highlight WordPress Searched Text in Search Results Works

This code is using PHP regular expressions to find the searched terms in the text returned by WordPress. When an occurrence has been found, it is wrapped in an HTML element. Then, I simply used CSS to define a yellow background to this element in WordPress.

WordPress

About Sandeep Kale

Avatar for Sandeep Kale
Sandeep Kale, Founder and chief editor of Tricks Window. He is a Software Engineer and a self developed blogger and designer behind Tricks Window. He lives in Pune, India. If you like This post, you can follow Tips And Tricks Window on Twitter OR Subscribe to Tricks Window feed via RSS OR EMAIL to receive instant updates.
Previous: Toshiba : A History Of Toshiba Laptops
Next: 70 Google Chrome Extension For Web Developers / Bloggers

Leave a Reply

Your email address will not be published. Required fields are marked *

*