How To Highlight Search Terms In WordPress

Search is a vital function for most WordPress sites, but isn't well-optimized out of the box.

One of the best ways to boost your site's search is to add term highlighting.

It's a simple addition, but makes the search user experience miles better.

Here's an example of term highlighting on this very blog:

  • Save

Let's see how to implement it in WordPress.

1. Download The Code Snippets Plugin

First things first, we need the Code Snippets plugin to add custom highlighting code to our WordPress theme.

Search for Code Snippets in the WordPress plugin directory, and it should be the first entry:

  • Save

Once you download and activate the plugin, you'll see a new tab in your WordPress admin called Snippets, like so:

  • Save

This is where we'll add the highlighting code in the following step.

2. Add Term Highlighting Code

Once you're in the Code Snippets dashboard, you should see an area to manage your code as well as add a new snippet:

  • Save

Click Add New, and you'll see the set-up screen for your new snippet:

  • Save

I've titled mine Highlight Search Term and selected the option Run Snippet Everywhere.

Here's the code you need to insert in the text box:


// Highlights matched terms in search queries
function highlight_results($text) {
     if (is_search() && !is_admin()) {
         $sr = get_query_var('s');
         $keys = explode(' ', $sr);
         $keys = array_filter($keys);
         $text = preg_replace('/('.implode('|', $keys) .')/iu', '<span class="search-highlight">\0</span>', $text);
     }
     return $text;
 }
 add_filter('the_title', 'highlight_results');

This code will look at all the post titles in a given search query and if there are matches, it will wrap the term in a <span> with the class search-highlight.

You can define the highlighting to look like whatever you want, but here's my CSS for reference:

/* Pale Yellow Highlighting */ 
.search-highlight { 
    background-color: rgb(249, 240, 91, 40%) !important; 
 }

Place the above CSS in your theme’s Customizer tab and you should see the changes to your search page.

Note: Since I only use the title of posts in my search results, I've added one filter using the_title as an argument. If your search results also feature an excerpt of your articles, add the following code:

// Highlight Excerpts
add_filter('the_excerpt', 'highlight_results');

With this addition, both the post's title and excerpt will be scanned against the search query, and if there are matches, they will be wrapped in highlighting.

The Bottom Line

By default, WordPress search is mediocre at best.

It's relatively slow, and doesn't add any extra features that would otherwise make the user experience more pleasant.

Highlight search terms is a quick and easy way to amplify your blog or website's search experience, and only takes one simple code snippet and a bit of CSS.

In my book, it’s worth the effort and is something I'll definitely implement in all my websites from now on!

How did this highlighting code snippet work out for you? Let me know in the comments below, I'd be happy to answer any questions – I usually respond within 24 hours 🙂

  • Save

Leave a Reply

Share via
Copy link