I would like to program in PHP, a search suggestion box, that will show possible pages, documents and posts, based on letters that a website visitor types into a WordPress search field.

For example something like this.

I really would like to build this from scratch, rather than depending on a third party plugin. Where do I start to implement something like this into a default WP environment?

2 Answers 2


This question is too broad to answer in detail, but here is how I would approach this:

  1. Given that WP's native search is slow, we can rule out using this to get intermediate results while the visitor is typing. Unless we have a lightning fast dedicated server.
  2. So, this means we will have to build our own index for search purposes. In order to limit the size of this index we would have to choose which fields we want to use for the suggestions. I'd say: title, excerpt, category and tags, along with the link to the page. Let's say these fields combined are a 400 byte chunk of information.
  3. Now, every time we save a post/page/attachment, we must store these chunks in a place that is readily accessible. The best way to do this probably depends on the eventual size of the site. With 1000 posts your index would be 400k bytes. That could be stored as an array of chunks in an option field in the database. If the site is much larger, one would probably save this array in a file.
  4. Now we have an index, the question is how to apply it to the site. There are two possible approaches: send searches to the server or download the whole index to the user end. If the index is 400k that's the size of an image, so just sending it with the page and search it locally with javascript would be acceptable. This is probably the fastest way. If you cannot send the whole index every time, you'll have to do the search on the server side by sending ajax-requests. The option table is always cached, so readily available. Keeping an index file cached requires some work, but is doable.

Bottom line: yes, this can be done, but expect it only to be really fast if there are not too many posts to index.

  • Thank you so much! Yes my journey dives into the lesser approach as I am serving up an intranet site that caters to 150 internal staff employees. No posts, 10 pages, 500 - 1000 PDF documents in the media section at most. That's my specs. Would really like to consider PDF suggestions in this process...Hopefully that is doable.
    – klewis
    Commented May 2, 2018 at 14:55
  • 1
    A pdf is an attachment post, which has fields for title and excerpt when uploading. So, that's certainly doable.
    – cjbj
    Commented May 2, 2018 at 15:00
  • That is awesome! I didn't know that much in depth about PDFs in WordPress
    – klewis
    Commented May 2, 2018 at 15:01
  • Beware that with attachments the excerpt field is called 'caption'.
    – cjbj
    Commented May 2, 2018 at 15:15
  • I can't thank you enough for giving me a good foundation to this process. My journey begins now and hopefully by this summer I'll have a full grip on managing attachments with there meta data, and using this data through search suggestions.
    – klewis
    Commented May 2, 2018 at 17:45

It sounds like you're asking for autosuggest, which is done with Javascript rather than PHP. PHP requires that the person searching submit their search, so they don't see suggestions along the way. Javascript however can start however many characters in you want it to, then pull results with every additional letter they type.

Generally speaking you'll want to create your own custom plugin, so start with a tutorial there to get a feel for the process. You basically just need to create a PHP file within a folder within /plugins/ with a few comments to help WP recognize it as a plugin. From there you can start working on JS and enqueue it using your plugin only on the page you're searching from. Add a listener on the search input box, then either immediately look up results when input is added, or wait until they type say 3 characters and then look up results. Once results are found, append a div with CSS to overlay it underneath the search input.


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.