Customize search highlight markup

Change the HTML element and CSS class that Better Search uses to highlight matching search terms.

What it changes

Better Search normally wraps highlighted terms in a mark element. This example changes the element to strong and the class to search-highlight.

What to change

Edit the return values in bsearch_custom_highlight_tag() and bsearch_custom_highlight_class(). Supply a tag name without angle brackets and a CSS class name without a leading period.

The snippet does not add CSS. Add styling for your chosen class in your theme if needed.

Requirements

  • Better Search
  • Better Search must be active with search-term highlighting enabled.

Source

better-search/bsearch-highlight-tag.php
<?php
/**
 * Plugin Name: Better Search - Custom Highlight Markup
 * Plugin URI:  https://webberzone.com/plugins/better-search/
 * Description: Replaces the default <mark> element and CSS class used to highlight search terms in results.
 * Author: Ajay D'Souza
 * Author URI: https://webberzone.com
 * Version: 1.0
 *
 * @package Better_Search
 * @license GPL-2.0+
 */

/**
 * Change the HTML element used to wrap highlighted search terms.
 *
 * Better Search wraps matched terms in <mark class="bsearch_highlight"> by default.
 * Use these two filters to swap in whatever element and class your theme expects.
 *
 * Common replacements:
 * - 'strong'  — bold with semantic weight
 * - 'em'      — italic with semantic emphasis
 * - 'span'    — no semantic meaning; rely entirely on the CSS class
 */

/**
 * Change the highlight HTML tag.
 *
 * @return string HTML tag name (without angle brackets).
 */
function bsearch_custom_highlight_tag() {
	return 'strong';
}
add_filter( 'bsearch_highlight_tag', 'bsearch_custom_highlight_tag' );

/**
 * Change the CSS class applied to the highlight element.
 *
 * @return string CSS class name.
 */
function bsearch_custom_highlight_class() {
	return 'search-highlight';
}
add_filter( 'bsearch_highlight_class', 'bsearch_custom_highlight_class' );

Details

Type
Plugin
Last updated
GitHub
Source · Edit companion · History

Developer references