/ Plugin Category

/ Content Management

/ Blog & Article Publishing

/ Highlight Search Terms

Highlight Search Terms

By Rolf Allard van Hagen

Content Management / Blog & Article Publishing

Highlight Search Terms Review - In-Depth Analysis

This plugin highlights search terms in WordPress search results using HTML5 mark tags. It operates without jQuery and supports BuddyPress and bbPress.

Performance Overview

WPS Score

6.79/10

User Rating

5/5 (based on 40+ reviews)

Active Installations

7,000+

Update Frequency

Below Average It is calculated using the weighted average of same category plugins.

Security Score

1 / 10 (Very Low Risk) It is calculated using the weighted average of all versions.

What It Does

This plugin highlights search terms within WordPress generated search results, both on the search results page and on each linked post page itself.

It is lightweight and has no options. The plugin is a simple fusion of existing methods for highlighting search terms and has been optimized for performance and compatibility with HTML5 and bbPress.

Features include click-through highlights, character and case insensitive highlighting, and compatibility with caching plugins. The search terms are wrapped in a mark tag to make them stand out.

Other Notable Features

Here are a few other notable features of this free Highlight Search Terms plugin.

Highlight

Hilite

Search Terms

Screenshots

FAQ

To make it work, you will need to take up to three steps, depending on your wishes and WordPress theme. (I) A normal installation and activation procedure; (II) Make sure your theme uses any of the recognized classes or ID’s for the post content div so that the script knows where and where not to look for search terms;
and (III) optionally add CSS styling rules to get highlighting for older browsers that do not support HTML5 like Internet Explorer 8 and below.

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. In most up to date themes (including WP’s own Default theme) post and page content is shown inside an ARTICLE element or DIV with class hentry.
This is recognized by the hilite script, which means search terms found in post and page content will be highlighted but not similar terms that coincidentally reside in the page header, menu, sidebar or footer.

If your current theme does not use these common designations (yet), this plugin will look for some other possible tags like #content, MAIN, #wrapper (which might include the header, sidebar and footer areas) and finally the BODY.

If this causes issues on your theme, see the last of the FAQ’s for ways to make it work.

III. Optionally add at least one new rule to your themes stylesheet or the Custom CSS editor 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 in the FAQ’s below.

Go in your WP admin section to Appearance > Customize > Custom CSS and add one of the examples below to get you started.

For a moss green background highlighting:

.hilite {     background-color: #D3E18A; }

Yellow background highlighting:

.hilite {     background-color: yellow; }

A light blue background with bold font:

.hilite {     background-color: #9CD4FF;     font-weight: bold; }

Orange background with black font:

.hilite {     background-color:#FFCA61;     color: #000000; }

If you want to give different terms used in a search phrase a different styling, use the class “term-N” where N is a number starting with 0, increasing 1 with each additional search term, to define your CSS rules.
The below example will make every instance of any term used in the query show up in bold text and a yellow background except for any instance of a second, third and fourth term which will have respectively a light green, light blue and orange background.

/* Default highlighting, but bold text. */ .hilite {     background-color: yellow;     font-weight: bold; } /* Moss green highlighting for second search term only. */ .term-1 {     background-color: #D3E18A; } /* Light blue highlighting for third search term only. */ .term-2 {     background-color: #9CD4FF; } /* Orange highlighting for fourth search term only. */ .term-3 {     background-color:#FFCA61 }

Keep in mind that for the first search term the additional class “term-0” is used, not “term-1”!

The script will search through your page source code for viable sections that usually contain page or post content, most commonly used in WordPress themes. Like ARTICLE or a DIV with class “hentry”. If that is not available, the script will look for other commonly used divs like #content, #main, #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="someid" class="someclass"> ... </div>. This will not be recognized by the script as a post/page content container and the script will default to highlighting starting with the BODY element.

This will result in terms getting highlighted in the header, menu, sidebar and footer too.

You can do one of three things to solve this:

A. Change your theme templates like single.php, page.pho and search.php so the post/page content div has a class “hentry” (you can append it to existing classes with a space like class="someclass hentry").

B. Add a filter in your theme’s functions.php (or a seperate plugin file) like this:

add_filter(     'hlst_selectors',     function( $selectors ) {         // custom theme selectors (change and append as needed)         $my_selectors = array(             'div.someclass'         );         return $my_selectors + (array) $selectors;     } );

C. Switch to a theme that does abide by the current WordPress conventions 🙂