Highlight Search Terms for WordPress

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:

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 the Custom CSS tab if the WordPress theme customizer.

You can find basic instructions and CSS examples in the FAQ’s.

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

Available hooks and filters

hlst_query_vars – The array of WordPress query variables that the plugin will identify as a search query. Must return an array. Default: ['search_terms','bbp_search'] (WordPress abd bbPress search)

hlst_input_get_args – An array of GET variables that the plugin will identify as a search query. Must return an array. Default: ['hilite'] (for click-through highlighting)

hlst_selectors – The array of possible HTML DOM element identifiers that the script will try. The first viable identifier it finds elements of will be scanned for search terms to mark, the rest is ignored. So the order is important here! Start with the element closest to, but still containing all the post/page title, excerpt or content.

hlst_events – The array of DOM event listeners that the inline script will watch for. Default: ['DOMContentLoaded','post-load'] (on Document Ready and for Jetpack Infinite Scroll and others).

hlst_inline_script – The inline script that will be added to the plugin script file. Can be used to add to or alter the inline script. Must return a string.

Known issues & development

If your theme does not wrap the main content section of your pages in a div with class “hentry” or HTML5 article tags, this plugin might not work well for you out of the box. However, you can make it work. See the last of the FAQ’s for an explanation.

Josh pointed out a conflict with the ShareThis buttons plugin. Since then, that plugin has been completely rewriten so please let me know if the problem still exists. Thanks!

Please file bug reports and code contributions as pull requests on GitHub.