Highlight Search Terms for WordPress

Highlight Search Terms for WordPress

Install now

Download Version 1.4.4

Requires WordPress: 3.7 or higher
Compatible up to: 4.7.3
Downloads: 59394

Rating: 5 out of 5 stars
# Votes: 17

Highlights search using jQuery terms within WordPress generated search results or when referrer is a non-secure search engine. 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.

Development, bug reports and contributions on https://github.com/RavanH/highlight-search-terms


  • BuddyPress / bbPress compatibility: highlighting within forum searches
  • Caching (WP Super Cache) compatibility
  • Click through highlights: Highlights not only on WP search results page but also one click deeper inside any of the found pages
  • Search terms wrapped in double quotes now considered as single term
  • Support for many more search engines: Google, Bing, Yahoo, Lycos, Ask, AOL, Baidu, Youdao, Dogpile, Search.com, Goodsearch.com, Mywebsearch.com, Webcrawler.com, Info.com

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 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 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. 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 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 will not work for you out of the box. See the last of the FAQ’s for ways to make it work.


Latest version: Download Highlight Search Terms for WordPress 1.4.4 [zip]
Downloaded 59394 times.

Rated 5 out of 5 stars with a total of 17 votes on WordPress.org »

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 highlighting 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 or Jetpack with the Custom CSS module activated!

I want to customize 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 javascript) 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 so that the array starting on line 55 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 🙂

Commercial message:


  1. highlight-search-terms screenshot 1

    An example image provided by How to Highlight Search Terms with jQuery on which this plugin is largely based.


Thanks for this plugin is just what I needed. I have a problem with Google Custom Search CSE integrated on my website, the plugin seems to not work. If I use the search for WordPress I have no problem with CSE looks just don’t go.

Thank you

Hi Vito, the plugin can only work with WordPress normal search pages. I have no idea how Google Custom Search works or how to make the two plugins work together. Sorry.

We used this plugin to highlight the search terms. The query results are highlighted for the document title and excerpt. The search terms within the body of the text are not highlighted. How can this be accomplished with this WP plugin? or is there an alternate plugin you are aware of? If the plugin returns a result set for display and highlighting; could it be invoked again within the plugin just for the text body for the query results? Thanks in advance.

Hi Ray, search term highlights should appear in the body text as well as title and excerpts. And doing a search for “knowing” on your site, I see it highlighted both in title/excerpt as well as in the page content after clicking the first result. Or is this not what you are asking?

That is what I am asking for but it is not highlighting within the document body when I run it. We are using WP and Elementor. Perhaps you could take a screen shot of your results and send to me?

Try with an anonymous browser window, or logged out from your WP admin. It might be caused by a conflict with something that is added (or different) for connected users…

ok I tried the Epic anonymous browser and get the same result. Is there a way to hire you may the highlight happen within each search result document body by enhancing your plugin? I am at a loss here. Love the plugin just need to take it 1 step further. I’ve tried the Chrome, IE11 and Epic and get the same result of no highlighting of the document text within the document on the key word search. Any help or suggestions are greatly appreciated.

OK, I see the problem: I used a regular WordPress search like this https://bigmacspeaks.life/?s=knowing and then it works fine but not when using the search field there in the header. It does not look like a regular WordPress search form. Is it a search plugin or something integrated in your theme?

Leave a Reply to Vito Laurino Cancel reply

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

%d bloggers like this: