Animated, Customizable Highlight Search Term

The new Search Tools plugin feature enhances user experience when listing in the search results. The keyword is wrapped into the HTML ‘mark’ tag and properly styled.

Animation catches the eye and speeds up finding the desired item. It is coded via standard CSS.


Colours can be modified via plugin options page. There is a picker for a background and text colour, too.

The feature can be disabled, if needed with a simple checkbox tick.


For adding the effect, the great JavaScript library mark.js was chosen.

The code is completely jQuery free. The assets are loaded only on the search results page, they don’t hit the web performance on other parts of the web.

Marking is character case insensitive. Even a part of the word is highlighted when searched.

If any problem occurs, feel free to open up a support ticket.

If the plugin fulfills expectation, the review is warmly welcomed. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *