In an attempt to make your WordPress search even more user friendly, you can highlight the search terms in the results. We did this for one of our clients, so we thought it would be useful for other users. In this article we will show you how you can highlight search terms in the results in WordPress.
First open your search.php and look for the following code:
<?php the_title(); ?>
Replace the above code with:
<?php echo $title; ?>
Make sure that you paste this line above the title code:
<?php $title = get_the_title(); $keys= explode(" ",$s); $title = preg_replace('/('.implode('|', $keys) .')/iu', '<strong class="search-excerpt">\0</strong>', $title); ?>
Now open your CSS file and add the styling for the class search-excerpt, and it will highlight the term. Currently the code is making the search terms bold. You can try this simple CSS in your theme’s stylesheet.
strong.search-excerpt {
background-color:yellow;
color:blue;
}
Source: Michael Martin
This works great but how do you highlight the search term in the excerpt and not just the title?
Hej, thank you very much for this very helpful piece of code. Is there a way to exclude links? The code as is breaks many of the “more”-links on my site.
Any chance you can update this neat tutorial for modern themes such as Twenty Seventeen where instead of title() in the loop, the loop goes through:
I’m comfortable with replacing
with HTML5
and the relevant CSS.
Or will we need a different approach in themes using get_template_part ?
Hey Vernon,
Thanks for the suggestion. We will try to update the article with more detailed instructions.
Meanwhile, you will need to edit the /template-parts/content-search.php template. If your theme does not have it, then you can create it and then reference it in your search.php template.
That’s working. Thank you.
Can we do the same for the_content as for the the_title or do we need a different approach?
Thanks a lot for the code, is work perfectly
I just the code at function, and done, is work
Hi
I can´t find on my site. I have this:
How can I change someting in that?
Thanks
Marlene
There is no “” in my search.php file..
—————————–
Mine looks like this:
“”
Seems like you wanted to paste code and it stripped out. Please wrap your code around [php] [/php] tags
Thanks @michael
This doesn’t even come close to working. All it does is display the title of the page the search term is found on. The terms themselves aren’t wrapped in any tags whatsoever.
Actually, it works perfectly. I don’t think you know what you are doing.
Thanks! Works like a charm!
You should add a little example image on every tutorial, that would be more understandable (:
Nice tutorial. And for those wo want to make some highlight with colors they must define their css class as div.highlight
and replace the code with
And that`s alll. Thanks and have fun.
Very helpful tutorial, will use it later on
Thanks for sharing!