Highlight Search Terms

Highlights search terms using jQuery when referer is a Google, Yahoo or Lycos 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.

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 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 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 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) editing your Theme Stylesheet to contain your personal highlight styling rules.

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.

1. Download archive and unpack.
2. Upload (and overwrite) the /highlight-search-terms/ folder and its content to the /plugins/ folder.
3. Activate plugin on the Plug-ins page

II. Add at least one new rule to your themes styleheet (style.css or a custom stylsheet) 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

Q. I do not see any highlighting!
A. 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!

Q. I have no idea what to put in my stylesheet. Can you give me some examples?
A. Sure! See tab Other Notes for instructions and some examples to get you started.

Q. I _STILL_ do not see any highlighting!
A. 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. However, in your particular theme, that might be different…

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="main" class="content"> ... </div>. You can do two things to solve this:

1. 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.
2. Change the source of wp-content/plugins/highlight-search-terms/hlst.php on line 69 so that the string reflects your main content ID or class name. In the above example that can be either $area = '#main'; or $area = '.content'; where a prefix ‘#’ is used for ID and ‘.’ for class.
3. Switch to a theme that does abide by the current WordPress conventions

As soon as I have found a solution for this issue with FireFox, I will put it in the next release! If anyone has tips for me, please let me know

Changelog

Really? Ok then… Read the full Highlight Search Terms changelog

Download

Latest version: Download Highlight Search Terms 0.5 [zip]
Downloaded 4014 times.