Requires WordPress Version: 2.3 or higher
Compatible up to: 3.1.4
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.
NOTE: You will NOT see any highlighting until you defined a 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 <span class="hilite term-N"> ... </span> 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. A (part of a) search phrase wrapped in quotes is considered as a single term.
What does it NOT do?
There are no CSS style rules set for highlighting. You are free to use any styling you wish but you absolutely need to define at least one rule to make the highlights visible.
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 to fit your theme. Without that last step, you 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. You have to complete step II of the installation process for any highliting to become visible. 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 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.6 [zip]
Downloaded 9545 times.
11 Reacties
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