How To Highlight Search Terms With jQuery

25.08.09 by Jerome in Tutorials

Make a better search experience for the user by highlighting any search terms with jQuery.

Simply open your functions.php file and copy and paste the code below:

function hls_set_query() {
  $query  = attribute_escape(get_search_query());
 
  if(strlen($query) > 0){
    echo '
      <script type="text/javascript"><!--mce:0--></script>
    ';
  }
}
 
function hls_init_jquery() {
  wp_enqueue_script('jquery');
}
 
add_action('init', 'hls_init_jquery');
add_action('wp_print_scripts', 'hls_set_query');

Open your header.php file and copy and paste the code below just before your closing head tag. Make sure your DIV ID #post-area is the same on your search results page.

<script type="text/javascript"><!--mce:1--></script>

Finally, you can change the CSS style by using the class .hls in your CSS stylesheet.

.hls { background: #D3E18A; }

Source: weblogtoolscollection.com

No related posts.

jQuery, search, Tutorials, wordpress