so, I've encountered on a problem.

What i want?

  • I want that my search finds any text on the page

What is the problem?

  • Search is only for posts / media / pages. I have one plugin in which I've stored some data and that data is visible on the page, and I want to be able to search that data.

What did I tried?

  • I tried to change the search querries (select * from wp_posts) to something that I wanted, nothing happened
  • Tried around 15 plugins with search, nothing happened

So, my question is this:

How can I search within a wordpress page, so my search finds ANY text on the page?


text is not stored in wp_posts table nor there is a posts. Only page with shortcode.


  • Google Custom Search ?
    – birgire
    Oct 25, 2016 at 13:07
  • Nope, it has Ads...
    – Josip Ivic
    Oct 25, 2016 at 13:28
  • Do you need to search only the current page ?
    – CodeMascot
    Oct 25, 2016 at 13:54
  • Yes, only the current page. Something with document.ready()
    – Josip Ivic
    Oct 25, 2016 at 14:45
  • @JosipIvic, See my answer. Hope that's gonna be helpful.
    – CodeMascot
    Oct 26, 2016 at 3:47

2 Answers 2


Use mark.js, a jQuery plugin

mark.js is such a plugin that is written in pure JavaScript, but is also available as jQuery plugin. It was developed to offer more opportunities than the other plugins with options to:

  • search for keywords separately instead of the complete term
  • map diacritics (For example if "justo" should also match "justò")
  • ignore matches inside custom elements
  • use custom highlighting element
  • use custom highlighting class
  • map custom synonyms
  • search also inside iframes
  • receive not found terms


Alternatively you can see this fiddle.

Usage example:

// Highlight "keyword" in the specified context

// Highlight the custom regular expression in the specified context

It's free and developed open-source on GitHub (project reference).

Example of mark.js keyword highlighting with your code

$(function() {
  $("input").on("input.highlight", function() {
    // Determine specified search term
    var searchTerm = $(this).val();
    // Highlight search term inside a specific context
mark {
  background: orange;
  color: black;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script>
<input type="text" value="test">
<div id="context">
  Lorem ipsum dolor test sit amet

I found the answer here. You can find plenty of other answer there also. But I prefer to use a jQuery plugin. The reason is given below-

Why using a selfmade highlighting function is a bad idea

The reason why it's probably a bad idea to start building your own highlighting function from scratch is because you will certainly run into issues that others have already solved. Challenges:

  • You would need to remove text nodes with HTML elements to highlight your matches without destroying DOM events and triggering DOM regeneration over and over again (which would be the case with e.g. innerHTML)
  • If you want to remove highlighted elements you would have to remove HTML elements with their content and also have to combine the splitted text-nodes for further searches. This is necessary because every highlighter plugin searches inside text nodes for matches and if your keywords will be splitted into several text nodes they will not being found.
  • You would also need to build tests to make sure your plugin works in situations which you have not thought about. And I'm talking about cross-browser tests!

Sounds complicated? If you want some features like ignoring some elements from highlighting, diacritics mapping, synonyms mapping, search inside iframes, separated word search, etc. this becomes more and more complicated.

When using an existing, well implemented plugin, you don't have to worry about above named things.

Hope that thing helps you.

  • this looks promising. I'll try it out.
    – Josip Ivic
    Oct 26, 2016 at 7:49

WP default search is not good, try this plugin: https://wordpress.org/plugins/search-everything/

Or this one is better, but you got pay https://searchwp.com/. You can specify custom fields to search or shortcodes.

If your text is not on database you should use Google Custom Search Engine inside your website

  • I tried it. It doesn't work that way.
    – Josip Ivic
    Oct 25, 2016 at 14:50
  • Or this one is better, but you got pay searchwp.com. You can specify custom fields to search or shortcodes Oct 25, 2016 at 14:58
  • nope, doesn't work either.
    – Josip Ivic
    Oct 25, 2016 at 14:59
  • Well if your text is not on database you should use Google Custom Search Engine inside your website Oct 25, 2016 at 21:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.