YT Search Highlight

A WordPress plugin that highlights search terms in post content, titles, and excerpts when viewing search results with customizable highlight colors.

Features

Automatic Highlighting: Wraps matched search terms with <mark> tags
Customizable Colors: Custom highlight background and text colors via WordPress color picker
Multiple Target Areas: Highlight in post content, titles, and excerpts (configurable)
Case Sensitivity: Optional case-sensitive or case-insensitive matching
Smart Detection: Only highlights whole words, avoids breaking HTML tags
Keyboard Navigation: Navigate between highlights using Ctrl+G (next) and Ctrl+Shift+G (previous)
Accessibility: High contrast mode support, reduced motion support
Responsive: Works seamlessly on mobile and desktop devices
Performance: Efficient regex-based highlighting with minimal overhead
Settings API: Clean WordPress-native settings interface
Translation Ready: i18n/l10n support

Installation

Copy the yt-search-highlight folder to your WordPress plugins directory (wp-content/plugins/)
Activate the plugin through the 'Plugins' menu in WordPress
Go to Settings > Search Highlight to configure options

Usage

Once activated, the plugin automatically highlights search terms when users view search results on your WordPress site.

Configuration

Navigate to Settings > Search Highlight in your WordPress admin panel to configure:

Enable Highlighting: Toggle search term highlighting on/off
Highlight Color: Choose the background color for highlighted terms (default: yellow #ffff00)
Text Color: Choose the text color for highlighted terms (default: black #000000)
Highlight in Titles: Enable/disable highlighting in post titles
Highlight in Excerpts: Enable/disable highlighting in post excerpts
Case Sensitive: Enable case-sensitive matching (default: off)

Keyboard Shortcuts

When viewing search results with highlights:

Ctrl+G (or Cmd+G on Mac): Jump to next highlight
Ctrl+Shift+G (or Cmd+Shift+G on Mac): Jump to previous highlight

Programmatic Access

// Get plugin instance
$plugin = YT_Search_Highlight::get_instance();

// Update highlight color
$plugin->ysh_update_option( 'highlight_color', '#ff0000' );

// Get current settings
$color = $plugin->get_option( 'highlight_color', '#ffff00' );

Hooks for Developers

The plugin provides semantic HTML that can be styled:

/* Custom styling for highlights */
mark.yt-search-highlight {
	background-color: #your-color;
	color: #your-text-color;
	font-weight: bold;
}

File Structure

yt-search-highlight/
├── class-yt-search-highlight.php  # Main plugin file
├── assets/
│   ├── css/
│   │   └── yt-search-highlight.css  # Frontend styles
│   └── js/
│       └── yt-search-highlight.js   # Frontend JavaScript
└── README.md                        # This file

How It Works

Detection: Plugin detects when a user is viewing search results (is_search())
Parsing: Extracts search terms from the search query
Filtering: Applies WordPress filters to content, titles, and excerpts
Highlighting: Uses regex to wrap matching terms with <mark> tags
Styling: Applies custom colors via inline styles and CSS
Enhancement: JavaScript adds navigation, animations, and highlight count

Technical Details

Search Term Processing

Splits search query by spaces
Filters out terms shorter than 2 characters
Removes duplicates
Respects case sensitivity setting

Smart Highlighting

Uses regex word boundaries (\b) to match whole words only
Skips highlighting inside HTML tags
Preserves HTML structure and attributes
Handles special characters safely with preg_quote()

Performance Optimization

Only loads CSS/JS on search results pages
Caches search terms within request
Uses efficient regex patterns
Minimal database queries

Security

All user input is sanitized using WordPress functions
Output is properly escaped
Capability checks for admin settings
Follows WordPress Coding Standards (WPCS)
No SQL queries (uses Options API)

Compatibility

WordPress: 5.8 or higher
PHP: 7.4 or higher
Browsers: All modern browsers (Chrome, Firefox, Safari, Edge)
Themes: Compatible with any WordPress theme
Plugins: No known conflicts

Accessibility Features

Semantic <mark> HTML element
High contrast mode support (prefers-contrast)
Reduced motion support (prefers-reduced-motion)
Keyboard navigation support
Print-friendly styles
Screen reader compatible

Browser Support

Chrome 90+
Firefox 88+
Safari 14+
Edge 90+
Opera 76+

Code Statistics

Main PHP File: ~420 lines (including comments)
CSS File: ~100 lines
JavaScript File: ~200 lines
Total: ~720 lines
Single PHP Plugin: ~420 lines (main file only)

Development

Coding Standards

This plugin follows WordPress Coding Standards (WPCS). To validate:

phpcs --standard=WordPress class-yt-search-highlight.php

Method Prefix

All methods are prefixed with ysh_ (YT Search Highlight) to avoid conflicts:

ysh_load_textdomain()
ysh_add_admin_menu()
ysh_highlight_content()
etc.

Constants Defined

YT_SEARCH_HIGHLIGHT_VERSION  // Plugin version number (1.0.0)
YT_SEARCH_HIGHLIGHT_BASENAME // Plugin base name
YT_SEARCH_HIGHLIGHT_PATH     // Plugin directory path
YT_SEARCH_HIGHLIGHT_URL      // Plugin directory URL

Customization Examples

Change Default Highlight Color

Edit class-yt-search-highlight.php line ~660 in the activate() method:

'highlight_color' => '#ff6b6b', // Red highlight

Add Custom CSS

Add to your theme's style.css:

mark.yt-search-highlight {
	background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
	padding: 3px 6px;
	border-radius: 4px;
	font-weight: bold;
}

Modify Highlight Pattern

To change what gets highlighted, modify the ysh_apply_highlights() method in the main plugin file.

Troubleshooting

Highlights Not Appearing

Check that the plugin is activated
Verify highlighting is enabled in Settings > Search Highlight
Ensure you're viewing actual search results (URL contains ?s=)
Check that search terms are at least 2 characters long
Clear cache if using a caching plugin

Colors Not Applying

Check browser developer tools for CSS conflicts
Try using !important in custom CSS
Verify color picker values are saving correctly
Clear browser cache

JavaScript Not Working

Ensure jQuery is loaded
Check browser console for JavaScript errors
Verify JavaScript file is loading (Network tab in dev tools)
Disable other plugins to check for conflicts

FAQ

Q: Does this work with custom post types? A: Yes, it works with all post types that appear in search results.

Q: Can I highlight only in content, not titles? A: Yes, uncheck "Highlight in Titles" in the settings.

Q: Does it affect search engine optimization (SEO)? A: No, highlighting only affects the visual display, not the HTML source indexed by search engines.

Q: Will it slow down my site? A: No, the plugin only loads on search results pages and uses efficient processing.

Q: Can I use multiple highlight colors? A: Not out of the box, but you can customize with CSS targeting different terms.

Changelog

1.0.0 (2025-10-20)

Initial release
Basic search term highlighting
Customizable colors
Settings page with WordPress color picker
Keyboard navigation
Accessibility features
Responsive design
JavaScript enhancements

Future Enhancements

Multiple color schemes for different search terms
Highlight statistics dashboard widget
Export/import settings
Regex pattern customization in admin
Highlight in custom fields
AJAX-powered instant highlighting

License

GPL v2 or later

Credits

Author: Krasen Slavov Website: https://krasenslavov.com GitHub: https://github.com/krasenslavov/yt-search-highlight

Built following WordPress Plugin Handbook and WPCS guidelines.

Support

For issues, questions, or feature requests, please visit:

GitHub Issues

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
assets		assets
README.md		README.md
class-yt-search-highlight.php		class-yt-search-highlight.php

krasenslavov/yt-search-highlight

Folders and files

Latest commit

History

Repository files navigation