Highlight Search Terms

Highlight Search Terms

Highlights search terms within WordPress generated search results orwhen referrer is a non-secure search engine, both on the search results page and on the post page itself.

This plugin is light weight and has no options. It started as very simple fusion between How to Highlight Search Terms with jQuery – theme hack by Thaya Kareeson and Search Hilite by Ryan Boren. It has since evolved with many optimizations, HTML5 and bbPress support.

Many WordPress sites are already top-heavy with all kinds of resource hungry plugins that require a lot of options to be set and subsequently more database queries. The Highlight Search Terms plugin for WordPress is constructed to be as low impact / low resource demanding as possible, keeping server response and page load times low.
This is done by going without any back-end options page, no filtering of post content and no extra database entries. A limited amount of hooks are used. The rest is done by jQuery javascript extention and your own CSS.

Features

  • Click through highlights: Highlights not only on WP search results page but also one click deeper inside any of the found pages
  • Character and case insensitive (lenient) highlighting
  • BuddyPress / bbPress compatibility: highlighting within forum searches
  • Caching (WP Super Cache) compatibility
  • Search terms wrapped in double quotes now considered as single term

WHAT DOES IT DO?

This low impact plugin uses only a few action hooks to define some variables 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 contentmain 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. Any 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 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.
Modern HTML5 browsers will use their own highlighting style by default, which usually is a yellow marker style background.

SO WHAT DO I NEED TO DO?

In most cases, it should just work. But you can do two things to ensure backward browser and theme compatibility:

1. Define CSS rules: There are no configuration options and there is nopredefined highlight styling. You are completely free to define any CSS styling rules in your themes main stylesheet (style.css) or the Custom CSS tab if the WordPress theme customizer.
You can find basic instructions and CSS examples in the FAQ’s.

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 contentmain and finally wrapper but if none of those are found, it will not work for you out of the box. See the last of the FAQ’s for ways to make it work.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.