Highlight Search Terms in WordPress

  • follow us in feedly
Published March 5, 2013 by Brad Knutson
Highlight Search Term

I have seen a few blogs and sites that highlight your search terms on the results page. This little bit of enhancement makes all the difference, as it increases user experience by decreasing the amount of information we need to read. It allows the user to quickly skim over the content and read what is important to them. It enables your user to browse your content faster and more efficiently, and I’ve seen it increase visit time.

But how do we duplicate this in our installation of WordPress? There doesn’t appear to be a basic WordPress setting to enable this, so it must be either a plugin or a custom filter.

There are a few plugins out there that will replicate this behavior on your search results, you can search for them on WordPress’ website. I personally don’t like to bloat my WordPress installation with more plugins when it’s not necessary, so I came up with a function that will highlight the search term, and any individual word in that term.

Enter the below code into your theme functions.php file.

function highlight_search_term($text){
    if(is_search()){
		$keys = implode('|', explode(' ', get_search_query()));
		$text = preg_replace('/(' . $keys .')/iu', '<span class="search-term">\0</span>', $text);
	}
    return $text;
}
add_filter('the_excerpt', 'highlight_search_term');
add_filter('the_title', 'highlight_search_term');

The function will find all matches for the search term, and replace them with the same term wrapped in a span tag with a class of “search-term.”

Now essentially all you have to do is write some CSS for span.search-term. If you want to take Google’s approach, you can simply bold the word. If you want to put your own spin on it, add a background color, change the text color, add whatever CSS you want to make the search term stand out.

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

2 thoughts on “Highlight Search Terms in WordPress

  1. Steven

    Keep in mind this applies the class search-term to any result found in the page. So if you have a menu item with the same text as your search term the menu item will also be effected by the search-term class as well.

    Reply
    1. Brad Knutson Post author

      I’ve also found that the code works when I do searches on the WordPress admin as well – but instead of the text being bold, I see the code. Very strange, but I can live with it. Thanks for commenting!

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">