WordPress Tutorials by WP101®

WordPress tutorial videos for beginners.

  • Buy Lifetime Pass
  • About WP101
    • Products We ❤️
    • Testimonials
  • WordPress Tutorials
    • WordPress 101 Course
    • WordPress 101: Classic
    • WooCommerce 101
    • Beaver Builder 101
    • Ninja Forms
    • WP Rocket 101
    • Jetpack Plugin
    • Yoast SEO
  • Help Forum
    • Hire a WordPress Expert
    • Contact Us
  • Blog
  • Log In

How do I highlight matching terms in WordPress search results?

WordPress Q&A Forum › How do I highlight matching terms in WordPress search results?
0 Vote Up Vote Down
Martin Roberts asked 8 months ago

I wonder if anyone can help me with an issue I am having with ‘search’ in WordPress/WooCommerce.

I am building a database of artists and architects who have worked on English Churches: http://staging.englishchurchartandarchitecture.co.uk/

I need to find a really good search solution.

So far, I have gone with a paid plugin called Ajax Search Pro which is doing a good job, but has one major drawback which may mean I have wasted the cost of the plugin! It doesn’t highlight search results on the results page.

The nature of this site means that a large portion of the likely search terms will be buried in the content of the entry.

As the site is very much in the development stages and only one letter of the alphabet has been populated, it’s not that easy to appreciate the nature of this problem fully.

However, taking ‘Smith’ as an example; if you enter ‘Smith’ into the search field it does return entries (which are, in effect, WooCommerce ‘products) which contain ‘Smith’. Even with only one letter (A) populated, there are several entries that contain Smith. It’s going to be a pretty poor user experience if you cannot see at a glance which entries contain the Smith you’re looking for.

I have contacted the plugin developer and he has said a flat ‘No’ to this feature.

I found this snippet: https://perials.com/highlight-searched-terms-in-wordpress-search-results/

Frustratingly, with my theme, there’s a glitch (we think this is theme related). It works perfectly with results that aren’t wrapped in an anchor tag. For reasons no one has been able to figure out, when a search result is wrapped in an anchor tag, the snippet renders the code as text so instead of being nicely highlighted, it appears something like this:

Armitage and <span class="search-highlight">Smith</span>

For the record, I have also tried a plugin called Highlight Search Terms. This only works partially, which is barely better than working at all!

So … I would REALLY appreciate if you could advise me on a solution which:

  1. Directs users to a search results page
  2. Searches Titles, categories AND search terms within content
  3. Highlights the results on the search page

If it helps, I am running a theme called ‘Roof’ from Victor themes, WP 5.4.1 and WooCommerce 4.1.0.

Thanks,
Martin

1 Answers
0 Vote Up Vote Down
Shawn Hesketh Staff answered 8 months ago

Hi Martin,

I wonder, have you taken a look at the Search module within Jetpack?

Jetpack Search completely replaces the default, limited search capability built into WordPress.

It provides better results and includes the features you mentioned above, and more:

  • Instant search and filtering without reloading the page.
  • Real-time indexing supports your search as you type.
  • Theme compatibility for both desktop and mobile.
  • Prioritized results based on your site traffic.
  • Spelling correction and highlighting matching terms.

Jetpack Search is not available in the free version of the Jetpack plugin. Rather, you’ll need to purchase a subscription to that particular feature, which starts as low as $5/month, and increases, depending on the number of records indexed.

Still, because Jetpack Search is powered by Elasticsearch and a network of globally distributed data centers, it’s easily the most powerful way to improve the search experience on your site.

Hope this helps!

Ask a Question

Share this with someone?

FacebookTweetLinkedIn

Most Recent Questions

  • How to change blog post author asked by William Cardott
  • How do I install the woocommerce store on the main menu tab of my existing wp website? asked by Adair Apple
  • How do I modify the header to display my site title and menu on top of a faint image of my art? asked by Gwyned Trefethen
  • Why don't I have the same image editing features in the image block tool bar shown in the video? asked by Gwyned Trefethen
  • Error message, “The response is not a valid JSON response.” asked by Constantinos Fissas
  • What is the difference between Gutenberg and WP Bakery Page Builder? asked by Tara Kortisses
  • How do I link blog posts to FaceBook? asked by mwhowell2k

Hire a WordPress Expert?

Need a quick fix or minor tweak to your WordPress theme? Or a custom feature for your site? Connect with 430 handpicked WordPress experts with just a click!

Chat Now

Site Links

  • About Us
  • Your Account
  • Products We ❤️
  • Affiliates
  • Testimonials
  • Blog
  • Contact Us

Courses

  • WordPress 101
  • WooCommerce
  • Beaver Builder
  • Ninja Forms
  • WP Rocket
  • Jetpack
  • Yoast SEO

Products

  • WP101.com
  • WP101 Plugin
  • Embed our videos on your site!

Connect with Us

  • Email
  • Facebook
  • Twitter
WP101 Membership Card

WordPress Tutorials by WP101© 2008-2021 WP101® LLC, Houston, TX. All rights reserved.
WP101® is a registered trademark with the U.S. Patent and Trademark Office.
Hosted by Nexcess and optimized with WP Rocket.
Privacy Policy | Terms of Use | Disclosure