Highlighting Search Terms in Wordpress

Here is a simple way to highlight your search terms and limit your searches to only posts, not pages. It creates two new template tags for you to use. It uses "<mark>" as the html tag. So you can just add a style to <mark> in your themes css. I use it on this site. Try searching for "WordPress" or "Javascript Timer." This plugin also assumes that you have changed your default search urls from "?s=term" to "/search/term/". Here is the code that changes this. This is default functionality of my WordPress theme called Roots. It is a great developer theme that make for rapid WordPress development. It is based on based on HTML5 Boilerplate, Blueprint CSS and Starkers. You can view the documentation and download the theme at www.rootstheme.com. It is created by Ben Word

// http://txfx.net/wordpress-plugins/nice-search/
function roots_nice_search_redirect() {
        if (is_search() && strpos($_SERVER['REQUEST_URI'], '/wp-admin/') === false && strpos($_SERVER['REQUEST_URI'], '/search/') === false) {
                wp_redirect(home_url('/search/' . str_replace( array(' ', '%20'), array('+', '+'), get_query_var( 's' ))));
                exit();
        }
}
add_action('template_redirect', 'roots_nice_search_redirect');

So once you install this plugin, you can use it accordingly in your search.php or in a loop-search.php

<?php

// replace the_title(); with
highlighted_title();
// and the_excerpt(); with
highlighted_excerpt(get_the_excerpt());

?>

This also has a bit "roots_search_filter()" that will limit the wordpress search to only search posts. You can feel free to remove it

<?php
/*
Plugin Name: Highlight Search
Plugin URI: http://www.matthewaprice.com/
Description: Drives Highlighted Search
Version: 1.0
Author: Matthew Price
Author URI: http://www.matthewaprice.com
License: GPL2
*/

function highlighted_title() {
 global $post;
 $uri = explode("/",$_SERVER["REQUEST_URI"]);
 $the_title = get_the_title();
 
$do_not_highlight = array( "a", "A", "is", "Is", "the", "The", "and", "And" );
 
 $search_term = explode("+",$uri[2]);
 
                foreach ($search_term as $search_t) {
                        preg_match_all("/$search_t+/i", $the_title, $matches);
                        foreach ($matches as $match) {
                                if (!in_array($match[0],$do_not_highlight)) {
                                        $the_title = str_replace($match[0], "[m]" . $match[0] . "[mm]", $the_title);
                                }
                        }
                }

                $find = array("[m]","[mm]");
                $replace = array("<mark>","</mark>");
                $highlighted_title = str_replace($find,$replace,$the_title);                    
                
echo $highlighted_title;

}

// for the excerpt, since WP doesn't natively search it, i just use highlighted_excerpt(get_the_excerpt)); in loop-search.php.  WP does search the_content();, and chances are an excerpt (like my site) includes some of the content in the excerpt.  This means that i will get some highlighted results on my search pages in the excerpt.

function highlighted_excerpt($the_excerpt) {

$uri = explode("/",$_SERVER["REQUEST_URI"]);

$do_not_highlight = array( "a", "A", "is", "Is", "the", "The", "and", "And" );

$search_term = explode("+",$uri[2]);
                                
                foreach ($search_term as $search_t) {
                        preg_match_all("/$search_t+/i", $the_excerpt, $matches);
                        foreach ($matches as $match) {
                                if (!in_array($match[0],$do_not_highlight)) {                           
                                $the_excerpt = str_replace($match[0], "[m]" . $match[0] . "[mm]", $the_excerpt);
                                }
                        }
                }
                
                $find = array("[m]","[mm]");
                $replace = array("<mark>","</mark>");
                $highlighted_excerpt = str_replace($find,$replace,$the_excerpt);        
                
echo "<p>" . $highlighted_excerpt . "</p>";

}

add_filter('pre_get_posts','exclude_pages_search_filter');

?>

The only thing left is to style the returned highlighted class. I have a css folder in my plugin folder that i enqueue with wp_enqueue_style(). You could also not do this and just place the css in your themes style.css. (you can also just add these functions to your functions.php file)

mark { background: #FFCC00; padding: 2px 4px;}