Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Highlight the Search Terms in Results in WordPress

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

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.

Highlighting search terms in WordPress search results

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

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

17 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Imme says

    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.

  3. Vernon Fowler says

    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:

     get_template_part( 'template-parts/post/content', 'excerpt' );

    I’m comfortable with replacing

    <strong class="search-excerpt">\0</strong>

    with HTML5

    <mark>\0</mark>

    and the relevant CSS.

    Or will we need a different approach in themes using get_template_part ?

    • WPBeginner Support says

      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.

      Admin

      • Vernon Fowler says

        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?

  4. Steph says

    There is no “” in my search.php file..
    —————————–
    Mine looks like this:

    “”

  5. Steve says

    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.

  6. DauAnunturi says

    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.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.