Requires WordPress Version: 2.3 or higher
Compatible up to: 3.3.2
Highlights search terms using jQuery when referer is a Google, Yahoo, Lycos, Bing, Ask, Baidu and Youdao search engine or within WordPress generated search results. This plugin is a light weight, low resource demanding and very simple fusion between How to Highlight Search Terms with jQuery – theme hack by Thaya Kareeson and Search Hilite by Ryan Boren, with some optimisations and adapted to support HTML5.
NOTE: to make the highlights visible in browsers that do not support HTML5 like Internet Explorer 8 or older you will have to define at least one CSS hilite styling! Read on below So what do I need to do? and Installation for more detailed instructions. You can find CSS examples in Other Notes.
What does it do?
This low impact plugin uses only two action hooks, wp_header where it needs to define some variables and wp_footer to insert the jQuery library (included in your WordPress package; only if not already loaded) and to add the hilite jQuery extension to your page source code. The jQuery extension that runs after the page has loaded, finds all search terms on that page inside each div with class hentry (or ID content, main or wrapper) and wraps them in <mark class="hilite term-N"> ... </mark> tags. Note that N is a number starting with 0 for the first term used in the search phrase increasing 1 for each additional term used.
What does it NOT do?
There are no CSS style rules set for highlighting. You are free to use any styling you wish but to make the highlights visible in browsers that do not support HTML5 like Internet Explorer 8 or older you absolutely need to define at least one rule.
So what do I need to do?
1. Define CSS rules
There are no configuration options and there is no predefined highlight styling. You are completely free to define any CSS styling rules in your themes main stylesheet (style.css) or use any Custom CSS plugin like Custom CSS to get a result that fits your theme best. You can find basic instructions and CSS examples under the Other Notes tab.
2. Check your theme
In most up to date themes (including WP’s own Default theme) post and page content is shown inside a div with class hentry. This means search terms found in post and page content will be highlighted but not similar terms that accidentaly show in the page header, sidebar or footer. If your current theme does not use the hentry class (yet), this plugin will look for IDs content, main and finally wrapper but if none of those are found, it not work for you out of the box. See the last of the FAQ’s for ways to make it work.
Installation Instructions
To make it work, you will need to take two steps! (I) A normal installation and activation procedure and (II) adding CSS styling rules to get highlighting for browsers that do not support HTML5 like Internet Explorer 8 or older. Without that last step, visitors using older browsers will not see any hilites.
I. Install now or use the slick search and install feature (Plugins > Add New and search for “highlight search terms”) in your WP2.7+ admin section or follow these basic steps.
- Download archive and unpack.
- Upload (and overwrite) the /highlight-search-terms/ folder and its content to the /plugins/ folder.
- Activate plugin on the Plug-ins page
II. Add at least one new rule to your themes styleheet (style.css or a custom stylsheet or a custom css plugin) to style highlightable text.
For example use .hilite { background:#D3E18A; } to get a moss green background on search terms found in the content section (not header, sidebar or footer; assuming your Theme uses a div with class “hentry”).
Please find more examples under the Other Notes tab.
Frequently Asked Questions
I do not see any highlighting!
This plugin has no configuration options page and there is no predefined highlight styling. For any highliting to become visible in browsers that do not support HTML5 like Internet Explorer 8 or older, you have to complete step II of the installation process. Edit your themes Stylesheet (style.css) to contain a rule that will give you exactly the styling that fits your theme.
Don’t want to edit your themes stylesheet? I can highly recommend Automattics own Custom CSS plugin!
I want to customise the highlighting but have no idea what to put in my stylesheet. Can you give me some examples?
Sure! See tab Other Notes for instructions and some examples to get you started.
I still do not see any highlighting!
Due to a problem with jQuery’s $('body') call in combination with many other scripts (like Google Ads, Analytics, Skype Check and other, even basic, javascript code) in the ever increasingly popular Firefox browser, I have had to limit the script search term wrapping to a particular div instead of the whole document body. I chose div with class “hentry” since that is the most commonly used content layer class in WordPress themes. If that is not available, the script will look for divs #content then #main then #wrapper. However, in your particular theme, none of these divs might be available…
Let’s suppose your theme’s index.php or single.php has no <div <?php post_class() ?> ... > but wraps the post/page content in a <div id="common" class="content"> ... </div>. You can do two things to solve this:
A. Change your theme and stylesheet so the post/page content div has either class="hentry" or <?php post_class() ?>. TIP: Take a look at how it is done in the Default theme included in each WordPress release. But this might involve some real timeconsuming tinkering with your stylesheet and several theme template files.
B. Change the source of wp-content/plugins/highlight-search-terms/hlst.php on line 61 so that the array contains your main content ID or class name. In the above example that can be either '#common', or '.content', where a prefix ‘#’ is used for ID and ‘.’ for class.
C. Switch to a theme that does abide by the current WordPress conventions 
Changelog
Really? Ok then… Read the full Highlight Search Terms changelog
Download
Latest version: Download Highlight Search Terms 0.8 [zip]
Downloaded 12078 times.
Nederlands
English
Français
23 Comments
I am trying to use your Highlight Search Terms WordPress plugin with the Atahualpa theme.
After I activate the plugin and perform a search, the first search results page entry is repeated 5 times and no others appear. Oh, and there is no highlighting either.
The search function works correctly again once I deactivate your plugin.
Suggestions?
You have hit on a problem. I see this happening with the default Twenty Ten theme too ( so it is not just the theme you are using ) but with some other themes there is no problem…
Here is a theme specific fix to get it working for now:
1. Open Plugins > Editor and select “Highlight Search Terms”
2. Find the line ( just below “// Get query variables”) where it says
$area = '.hentry';3. Change it to
$area = '#middle';4. Save
I Hope to get it fixed for others soon but until then, this should work
The fact that you see no highlighting is probably because you have not added any highlighting rules to your stylesheet. A simple rule like
.hilite { background-color:yellow }should make the search terms pop out with a yellow marker-like background. More intricate rules to make different terms stand out with different styles, are suggested in the readme and on this page.I am also trying the Atahualpa theme. I get the highlight color surrounding the result, but only on the first returned entry, not any of the others. Thanks.
Well, found that for Atahualpa theme, you don’t have to use your plug-in for highlighting. Instead of adding a “.hilite” CSS style, use “.search-match” with a background color. The theme will then do highlighting automatically. Sorry to bother you.
That’s good to know. The theme apparently has a similar function baked in. Thanks for sharing
my category called “Paulinho da Viola” sound activated the plugin has highlighted all the words separately. Example: “Paulinho” all words, “da” all words and “Viola” all words. Want it highlighted the three together.
what to do?
thanks
I’m afraid that’s not possible with this plugin.
Hello,
I have same the concern. I work with the topic represent. The first result is well highlighted, but not the others… Which can be the problem? Thank you for your answers. Cordially.
Salut Adeline, do you have a link to your site with this issue?
http://www.mshs.univ-poitiers.fr/patrimoine-territoires/
About that theme, in the header there is a block of scripts called that return 404:
<script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
But that is not the cause of the issue. It seems the prototype and jquery library are conflicting, resulting in the error
on the second call (after the first successful call) to that same jquery function.
I have the impression it’s the lightbox 2 plugin that uses prototype. Try disabling it to see if that changes anything… If that helps, consider using another lightbox that uses jquery instead of prototype. Like FancyBox… got a plugin for that as well, you can find it on this website.
Right now, you are using two plugins that depend on jquery (hilite search terms and cforms) and one that depends on prototype. It makes no sense using (and thus loading on each page view) two different libraries when you can do with just one
Hi,
I love the plugin but it doesn’t seem to work witn non-Latin characters for some reason, Hebrew in this case. Search results are returned just fine but only keywords in English are highligted. Any ideas?
Thanks a lot,
Amir
Hi Amir, it sounds like a problem with javascript recognizing the non-latin characters. Do you have a link to your site for me? I’d like to see it live to learn more about the issue… Thanks
Sure -> http://www.amirdotan.com/blog/
Thanks a lot!
Amir, I have just uploaded a new development version.
Please ignore the new 0.7 version and download the Development Version from http://wordpress.org/extend/plugins/highlight-search-terms/download/ under “Other Versions” and install via WordPress or FTP upload.
Let me know if that works for you
Perfect
many thanks. I really appreciate it. By the way, is there an option to keep the highlights when accessing the post from the search resuls?
Hi Amir, the plugin itself cannot do that but you can make it happen by editing your theme… What the plugin needs is the s query parameter in the page request. Let’s say you searched on your site for the words “windows 7″, then the URL looks like http://www.amirdotan.com/blog/?s=windows+7 and it is the s=windows+7 that is used by the plugin to find the key words. Now on that search results page, the URLs for each post listed do not have that s= parameter anymore but if they would have, then the following page would have the search term highlighted as well. So the trick is to make your theme re-use the query parameters in the search results permalinks.
There are two ways to approach this:
1. Find the template that is used for the search results. It depends on your theme: it is usually called search.php but in TentyTen for example, you would need to create a new file called loop-search.php … Then instead of using
the_permalink()you might try something likeecho add_query_arg('s', get_search_query(), get_permalink($post->ID))… or …
2. Edit your themes functions.php and add the following code
add_filter('the_permalink','add_my_search_query_to_permalink');
function add_my_search_query_to_permalink($url) {
if( is_search() )
return add_query_arg('s', get_search_query(), $url);
else
return $url;
}
Please note: these code snippets are untested so be prepared to revert to the original files to get your site back online
Great! thanks. I’ll try it out and report back
Hello RavanH
I’ve installed 0.7 and it works…. however when I search for a term with quotes .. ie “Iran Oil” (so it gets all posts with ‘Iran Oil’ and not for eg ‘Iran has Oil’ in them)…. the search results terms are not highlighted. The highlight only works if I enter a search without quotes.
Any help appreciated.
Hi Zaahid, thanks for reporting this… It’s currently not programmed into this plugin to make the distinction between quoted and unquoted search strings but I’ll take it as a feature request for future development
Hey RavanH,
The plugin is great. thanks for your work! Right now it highlights my search terms if they are at the beginning of a string, but I was wondering if there was a way to make it highlight if the search terms if they are in the middle or end of a word?
For example:
-If I search “Word” and a result is “WordPress”, I get the proper highlighting WordPress.
-If I search “Press” and the result is “WordPress”, I get no highlighting.
Am I doing something wrong?
Hi Jason, this issue has been adressed in the current development version. It’s just not officially released as stable yet. If you can’t wait, download it straight from http://downloads.wordpress.org/plugin/highlight-search-terms.zip, unzip it and upload the files overwriting the old ones via FTP. It should fix the issue you are seeing
Awesome! It works great. And I see that it is stable now! Thanks so much for the update!