Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Highlight the Search Terms in Results in WordPress

Last updated on by
Elegant Themes
How to Highlight the Search Terms in Results in WordPress

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.

Source: Michael Martin


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Mahesh says:

    Thanks @michael

  2. 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.

  3. Jason says:

    Thanks! Works like a charm!

  4. Chris says:

    You should add a little example image on every tutorial, that would be more understandable (:

  5. 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.

  6. Nina says:

    Very helpful tutorial, will use it later on :)
    Thanks for sharing!

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.