Many WordPress users find the search function a bit imcomplete. For exemple, it don’t automatically hightlight the searched text. In this recipe, I’m going to show you how to do it with help from regular expressions.
Open your search.php file and find the the_title() function. Replace it with the following:
echo $title;
Now, just before the modified line, add this code:
<?php
$title = get_the_title();
$keys= explode(" ",$s);
$title = preg_replace('/('.implode('|', $keys) .')/iu',
'<strong class="search-excerpt">\0</strong>',
$title);
?>
Save the search.php file and open style.css. Append the following line to it:
strong.search-excerpt { background: yellow; }
That's all. Better, isn't it?
Credits goes to Joost de Valk for this awesome recipe!
If you enjoyed this article, please consider sharing it!
Related Posts
Leave a Comment
- ModThemessave 15% off your purchase […]
- Zidalgo Themessave 20% on your order […]
- WooThemessave 20% on your purchase […]
- Autobloggedsave $40 on multi-site licence […]
- Kreative Themessave 50% on your purchase […]
- Smarter Themesave $5 on your order […]
- Classipress Themesave 20% on your purchase […]
- ReviewAZONsave $15 on your order […]
- Headway Themeget 20% off your licence […]
- Gorilla Themesget 10%off any theme […]
On Twitter : @VPSneeded trois pour commencer, j'espère que ce sera suffisant car niveau prix c'est pas donné
Theme & content : Copyright © 2008 - 2010 Jean-Baptiste Jung. Graphic art by GreenBubbles.org.ua, all right reserved.
28 Responses
Very nice tip. If only we had a way of highlighting the ’search string’ in the actual text of the articles returned by search.php. You could have many articles returned that do contain the ’search string’ but these do not occur in the title.
Great tip! I modified it by highlighting the searched text in the excerpt. Just change the $title to $excerpt, and change get_the_title with get_the_excerpt. echo the $excerpt variable in your search results and you’re done
That a really nice code! I also think I have seen a plugin called google-highlite which you can see on my site where I wrote about it. Google Highlight
But I would prefer the PHP code, other’s may not.
Ah! Just the thing that I needed to add to my theme’s next update. Thanks!
Is it possible to combine highlight in title and in excerpt?
It’s easy to do both…
$title = get_the_title();
$excerpt = get_the_excerpt();
$keys= explode(” “,$s);
$title = preg_replace(‘/(‘.implode(‘|’, $keys) .’)/iu’,’‘,$title);
$excerpt = preg_replace(‘/(‘.implode(‘|’, $keys) .’)/iu’,’‘,$excerpt);
Then just echo $title and $excerpt where you want to display it.
Hi, very nice tip but I have a BIG problem highlighting the search result… I have an image for every post I write and the alt and title within the img tag show the title of my post. The problem is when the search result is highlighted, it break my alt and title img tag and the rest of the text is a mess. The reason is it includes some html stuff to highlight the ‘word’ within my alt and title tag… How can I make the highlight skip the img tag?
Please help me, I searched for days and didn’t find anything…
Thanks a lot!
Well, either nobody knows how to do that or everyone is on vacation LOL
I tried everything I could but I couldn’t find a solution, I need your help on that, please!
You might want to try adding a custom excerpt that doesn’t contain the image then use custom fields to query the image and display that, i.e.
$title = get_the_title();
$excerpt = get_the_excerpt();
$keys= explode(” “,$s);
$title = preg_replace(’/(’.implode(’|’, $keys) .’)/iu’,’‘,$title);
$excerpt = preg_replace(’/(’.implode(’|’, $keys) .’)/iu’,’‘,$excerpt);
$the_image = get_post_meta($post->ID, ‘enclosure’, false);
$the_image = explode(“\n”, $the_image[0]);
How’s that?
Oops! Change ‘enclosure’ near end of 2nd last line to ‘the_image’, which would be the name of your custom field.
Hi Nick, thank you so much for your help but unfortunately, the image is showing first in all my article, I insert them in the post and cannot change that now, my whole blog is working this way…
The only way would be to add a variable in:
$content = preg_replace(’/(’.implode(’|’, $keys) .’)/iu’,’‘,$content);
to skip the alt and title tag of the image. Do you think that would be possible? If not, I will not be able to use this great highlight code…
Thanks for your help!
But if you query the_excerpt you won’t get the images in your post. Isn’t that what you want?
How do I change so my search result once again starts displaying “read more” instead of [...], I have that function in my functions-file, and before I applied that hack it worked fine, but now once again shows [...]?
Trackbacks: