Highlight Search Terms

Highlight Search Terms

Install now

Download Version 1.4.4

Requires WordPress: 3.7 or higher
Compatible up to: 4.7.2
Downloads: 57397

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

Features

  • 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.

Commercial message:

Screenshots

  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.

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 🙂

Download

Latest version: Download Highlight Search Terms 1.4.4 [zip]
Downloaded 57397 times.

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

70 thoughts on “Highlight Search Terms

  1. Richard Smoke

    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?

    Reply
    1. RavanH Post author

      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.

      Reply
  2. Mike

    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.

    Reply
  3. Mike

    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.

    Reply
    1. RavanH Post author

      That’s good to know. The theme apparently has a similar function baked in. Thanks for sharing 🙂

      Reply
  4. marcelo oliveira

    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

    Reply
  5. Marin

    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.

    Reply
        1. RavanH Post author

          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

          Uncaught exception: TypeError: ‘term.replace’ is not a function

          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 🙂

          Reply
  6. Amir

    Hi,

    I love the plugin but it doesn’t seem to work witn non-Latin characters for some reason, Hebrew in this case. Search results are returned just fine but only keywords in English are highligted. Any ideas? 🙂

    Thanks a lot,

    Amir

    Reply
    1. RavanH Post author

      Hi Amir, it sounds like a problem with javascript recognizing the non-latin characters. Do you have a link to your site for me? I’d like to see it live to learn more about the issue… Thanks 🙂

      Reply
  7. Amir

    Perfect 🙂 many thanks. I really appreciate it. By the way, is there an option to keep the highlights when accessing the post from the search resuls?

    Reply
    1. RavanH Post author

      Hi Amir, the plugin itself cannot do that but you can make it happen by editing your theme… What the plugin needs is the s query parameter in the page request. Let’s say you searched on your site for the words “windows 7”, then the URL looks like http://www.amirdotan.com/blog/?s=windows+7 and it is the s=windows+7 that is used by the plugin to find the key words. Now on that search results page, the URLs for each post listed do not have that s= parameter anymore but if they would have, then the following page would have the search term highlighted as well. So the trick is to make your theme re-use the query parameters in the search results permalinks.

      There are two ways to approach this:

      1. Find the template that is used for the search results. It depends on your theme: it is usually called search.php but in TentyTen for example, you would need to create a new file called loop-search.php … Then instead of using the_permalink() you might try something like echo add_query_arg('s', get_search_query(), get_permalink($post->ID))

      … or …

      2. Edit your themes functions.php and add the following code

      add_filter('the_permalink','add_my_search_query_to_permalink');

      function add_my_search_query_to_permalink($url) {
      if( is_search() )
      return add_query_arg('s', get_search_query(), $url);
      else
      return $url;
      }

      Please note: these code snippets are untested so be prepared to revert to the original files to get your site back online 😉

      Reply
  8. Zaahid

    Hello RavanH

    I’ve installed 0.7 and it works…. however when I search for a term with quotes .. ie “Iran Oil” (so it gets all posts with ‘Iran Oil’ and not for eg ‘Iran has Oil’ in them)…. the search results terms are not highlighted. The highlight only works if I enter a search without quotes.

    Any help appreciated.

    Reply
    1. RavanH Post author

      Hi Zaahid, thanks for reporting this… It’s currently not programmed into this plugin to make the distinction between quoted and unquoted search strings but I’ll take it as a feature request for future development 😉

      Reply
  9. Jason

    Hey RavanH,

    The plugin is great. thanks for your work! Right now it highlights my search terms if they are at the beginning of a string, but I was wondering if there was a way to make it highlight if the search terms if they are in the middle or end of a word?

    For example:
    -If I search “Word” and a result is “WordPress”, I get the proper highlighting WordPress.
    -If I search “Press” and the result is “WordPress”, I get no highlighting.

    Am I doing something wrong?

    Reply
  10. martin

    Hi RavanH,
    Is there a way to highlight accented words?
    My website is in spanish and I need to hightlight the search term with or without accented characters. e.g. caida = caída.
    Can you point into the right direction, I don’t have too much knowledge with jQuery.
    Thanks!
    Martin.

    Reply
    1. Rolf Allard van Hagen Post author

      Hi Martin, words with accented characters should be recognised by the plugin already. Search for “donné” on this site for example… Or is that not what you mean?

      Reply
  11. Patrick

    Hi RavanH,

    this plugin is only used on the search page. Wouldn’t it be better to change some code, that the Javascript is only included in the search page?

    if(is_search()) {

    echo ‘

    var hlst_query = new Array(‘ . implode(‘,’,$filtered) . ‘);
    var hlst_areas = new Array(“‘ . implode(‘”,”‘,self::$areas) . ‘”);

    ‘;
    } else {
    echo ”;
    }

    Reply
    1. RavanH Post author

      Hi Patrick, the plugin is not only active on the search page. It will also highlight search terms (1) on incoming traffic from search engines (as long as those where not logged in to Google because then the used search terms are blocked and cannot be detected by the plugin) and (2) when you click one of the internal search results, the terms will be highlighted on that next page… Those cases will not fall under is_search().

      But you are right, the script is included even when it is not needed. This is done for two reasons. The script is fairly lightweight and I figure that the downside of running extra PHP routines to detect if the script is needed (like I said, not only is_search() will do it) will hardly make up for simply including it each time. Another reason is cache plugin compatibility. Like WP Super Cache running on this website. To do this, I have moved a large part of the search term detection from the WP internals to the javascript itself and so, inclusion on every page is needed.

      Former versions of the plugin worked differently and did not include the script when it deemed not necessary but this meant incompatibility with caching plugins. In the next version, I plan to separate the main script in two parts where detection is always included which then does a writeline to include the second part if it does indeed detect search terms.

      Hope that explains it a bit 🙂

      Reply
  12. Pingback: Redesign a lá Google Plus, přechod na webhosting a WordPress, tipy na pluginy a vše s tím spojené | Osobní blog Petra Vaníčka

    1. RavanH Post author

      Hi Bart, thanks for reporting this. I’ll have a look into it and find a way to repeat the issue…

      Reply
      1. bart

        Ok. Thanks.

        If you want i can activate the plug-in for a few minutes but not to long. Send me a mail to say when.

        Reply
  13. אבלים מודעות אבל

    W3 total cach issue

    My site is avelim.co.il

    It runs on Hebrew wordpress 3.5.1 with the theme Weaver II Pro 1.3

    When you search for a term in the search box widget it highlights the searched term in the search results. This works very well when W3 total cach is deactivated. It does not work when W3 in active.

    How can I fix this?

    Reply
    1. RavanH Post author

      Hi Yoram,

      Doing a search on your site now, I see highlighting. And it looks like you are running W3TC… Is it a specific option in W3TC that breaks search highlighting?

      Reply
        1. RavanH Post author

          Checked your site in Chrome, Firefox and Opera (don’t have IE, sorry) but see no problem…

          Reply
  14. Levi Must

    Hi,

    I have installed the plugin in my custom theme. The search.php displays the search results correctly highlighted, but immediately the page disappears (goes blank). It seems to be attempting to connect to something. I have attempted the solutions described in the FAQ page but no luck so far.

    Thanks.

    here is the search form (I have disabled the plugin for now)
    http://pathofshe.com/blog/

    Reply
    1. RavanH Post author

      Hi Levi, it looks like you disabled the highlight plugin but the issue sounds like a javascript conflict. First of all, you need to make sure the search results page source code starts with the DOCTYPE declaration which in your case, it does not. Then make sure the jQuery library is only loaded once, which again, it appears not to be the case (Twitter/jquery.js)… Next, you’ll need to eliminate conflicts with other plugin scripts by disabling them all and finally eliminate a conflict with the themes scripts or source code errors by switching to the default theme.

      Reply
  15. Levi Must

    Thanks for taking the time to look at my problem. I have corrected the doctype and jQuery issues. The highlight search plugin is now active, would you be able to take one more look at http://pathofshe.com/blog/? The conflict is probably with Jetpack, although I notice that when the program hangs it seems to be attempting to “read s.gravatar”.

    Your plugin is neat and I would like to get it to work but for me it’s more of a ‘nice to have’ rather than ‘need to have’. The Jetpack functions are more important to me. Switching to a default theme is not an option.

    Thanks again!

    Reply
    1. RavanH Post author

      Hi Levi, it’s a weird issue. The error occurs indeed in the WordPress.com stats script but after activating the stats module on my own site (this one) effectively running the two plugins together like on your site, the error does not occur. I have the feeling it’s related to something else but cannot pinpoint the source of the problem.

      Could you try disabling all other Jetpack modules except Stats? If that does not solve it, then it might be related to the Typekit library that seems to be loaded by your theme…

      Reply
  16. Levi

    Hi RavanH,

    I tried disabling everything in Jetpack other than the stats but the problem persists. Same with typekit.

    The problem definitely is Jetpack – the problem occurred on my other site levimust.com but resolved when I disabled Jetpack entirely. I will continue to try modifying the Jetpack setup and see if the conflict resolves. I’ll let you know if it is resolved.

    Once again, thanks for your time. It is a really nice plugin.

    Reply
    1. RavanH Post author

      Very odd. Like I said, Jetpack and the Stats module are running alongside Hilite Search Terms on this very site without any issues… You said “Same with typekit.” Did you mean you removed that from the theme? Are there no other (font) scripts depending on Typekit that start failing then? Last thought: could you change the Stats module setting called “Hide the stats smiley face image.” to see if that changes anything?

      Reply
  17. Levi

    I removed these files form my header.php, thus removing everything typekit:

    try{Typekit.load();}catch(e){}

    Also, tried disabling the smiley face..problem persists.

    It is definitely related to Jetpack since when I deactivated Jetpack entirely Hilight Search worked fine. But I wonder if there is any significance to the fact that when the screen goes blank, the last thing happening is it is attempting to read my gravatar…I wonder if the connection to https://en.gravatar.com/?

    Reply
    1. RavanH Post author

      It might be related but I’ve got Gravatar Hovercards running too without issues… Can you try disabling the Gravatar Hovercards module?

      Reply
      1. Levi Must

        I tried removing the gravatar from gravatar.com but it had no effect on the problem. Is there a different way to disable the Gravatar Hovercards module?

        The plugin seems to be working ok on my other site at levimust.com

        Thanks.

        Reply
        1. RavanH Post author

          Hi Levi, go to the Jetpack admin page (where all the modules are listed) and find the Gravatar Hovercards module with the two buttons Learn More and Configure. Now click on Learn More and the button that said Configure before will now show Deactivate… Or you can go to Settings > Discussion and deactivate the Avatar and Gravatar Hovercards options there to see either one changes to the issue 🙂

          Reply
  18. levimust

    Nope…disabled the Gravatar, and for luck also tried disabling the smiley face again. The page still hangs, only it isn’t stopped at the reading Gravatar step any more….curious!

    Reply
    1. RavanH Post author

      Hi Levi, looking at the source code of a search result page, I notice that it has TWO html tags (line 2 and 3) while there can only be one… Plus the div with id “head_image_container” does not seem closed. You’ll need to fix these errors because the DOM tree is messed up.

      But I’ve also found that when you edit my plugin like below, it should work in spite of the problems with the DOM tree…

      Open the plugin file hlst.php in the WordPress plugin editor and find the part (near the top) that reads


      static $areas = array( // Change or extend this to match themes content div ID or classes.
      'div.hentry', // The hilite script will test div ids/classes and use the first one it
      '#content', // finds so put the most common one first, then follow with the less
      '#main', // used or common outer wrapper div ids.
      'div.content', // When referencing an *ID name*, just be sure to begin with a '#'.
      '#middle', // When referencing a *class name*, try to put the tag in front,
      '#container', // followed by a '.' and then the class name to *improve script speed*.
      '#wrapper' // Example: div.hentry instead of just .hentry
      ); // Using the tag 'body' is known to cause conflicts.

      Now change that to

      static $areas = array(
      'article'
      );

      Reply
  19. levi

    Your change to hlst.php fixed the issue!

    I removed the extra tag, but the problem persisted. I don’t think the “head_image_container” tag was not closed, as far as I can see. Perhaps there is another open tag but I can’t see where.

    Once again, thanks so much for your patient sleuthing. I really like your plugin.

    Levi

    Reply
  20. dirk

    Hey I like your plugin really nice.
    There is a flaw in the setup you are using; try to search for the letter ‘e’. This will highlight the results nice. Then navigate to any page (or even the homepage) of your wordpress blog. The letter e is still highlighted. I think this is because of your latest update.

    Is there a way to turn this off?

    Reply
    1. RavanH Post author

      Hi Dirk, this is done to keep highlighting when a visitor does a search and then clicks on one of the search results. The term is then highlighted again. At this point there is no way to turn this off but I’ll consider a way to either be able to turn it off or to only do click-through highlighting when actually clicking a search result and not when navigating to any random page…

      Reply
      1. dirk

        Hey RavanH, the last option sounds best from a user perspective. I like the fact that the search term is highlighted when I search on the site but going to a different page and still have the term highlighted is a bit strange in my opinion.

        So 1 vote for the last option you mention 🙂

        Reply
  21. Gerald

    I LOVE the functionality but when I activate the plugin and use search, my pages load fine. However, my posts will not. Any ideas?

    Reply
    1. Gerald

      I figured out the solution. I didn’t have the proper tags. I experimented with adding one but it didn’t work, until I changed the order and added my own up the list. Then it worked. I added a #post_content. Thanks!

      Reply
  22. Blog Admin

    Hi, love the plugin (as do my clients) but was wondering if there was any way of only finding/highlighting whole words. For example, when I did a search on a dev site for “the stripey street cat” it highlighted the ‘the’ in words like ‘there’, ‘altogether’ and ‘further’ along with the whole words in the search query. Any options? Many thanks, Ellen.

    Reply
      1. Ellen K

        A very belated thank you for getting back to me – I appreciate it. The current version of the plugin is all good – and I’m quite happy to leave things as they are if there’s incompatibilities that may cause problems! Thanks again, Ellen.

        Reply
  23. Kevin

    I am using Relevanssi search, Genesis and Dynamik Website Builder. When I put in the search terms: talk it up, every word that has any of those terms as part of it gets highlighted. I believe that is called a “fuzzy” search. I don’t want that. I set my Relevanssi to the “and” as the default operator. Can’t I somehow set your plugin to use the same operator? I tried putting the search string in quotes, but that didn’t work.

    Reply
    1. RavanH

      Hi Kevin, the plugin uses “fuzzy” search because the internal WordPress search does too. You want that disabled but my plugin does not have any options yet. They will come one day but not tomorrow…

      Reply
  24. Kevin

    Is there any way for me to disable the fuzzy search though coding? if not, do you know of any other highlighting plugins that make this possible? I like your plugin, but my client is not happy with the fuzzy search. I have to change it.

    Reply
    1. RavanH

      Hi Kevin, I can send you a development version that has does a strict search when quotes are used in a regular WordPress search. If you can test that in combination with Relevanssi, I would appreciate it much 🙂

      Reply
  25. Pingback: WordPress Plugins A-Z #205 Boosting Speed

Leave a Reply