🎨 Customization, Styling, and Developer Notes

Highlite Pro is not only powerful out-of-the-box but also developer-friendly. This section guides site owners, designers, and developers on how to customize the plugin’s frontend appearance and behavior, and how to extend it further using hooks or overrides.

---

🎨 Custom Styling Options #

The plugin includes its own default CSS for highlighting behavior and UI elements. However, all components are easily targetable via class names, enabling you to apply your own theme styles.

✅ Key CSS Classes and IDs #

Element	Class / ID	Purpose
Highlight span	.user-highlight	Applied to inline/block elements
Highlight wrapper	.highlight-container	Wraps the highlight and action buttons
Highlight button	#highlight-action-btn	Appears on text selection
Action icons	.highlight-delete-btn, .highlight-note-icon, .highlight-color-icon	Hover icons for delete/note/color
Color picker	#hl-color-picker	Modal for selecting preset/custom colors
Color blocks	.hl-swatch, .hl-custom-swatch, .hl-custom-input	Preset and custom picker options
Notes editor	#hl-quill-editor	Embedded Quill.js editor in SweetAlert2 modal

💡 Tip: #

You can override these styles by adding custom CSS to your theme or child theme’s style.css, or via the WordPress Customizer (Appearance > Customize > Additional CSS).

Example:

.user-highlight {
  border-radius: 3px;
  padding: 0 2px;
  font-weight: bold;
}

---

🛠️ Developer-Friendly Practices #

✅ Uses Standard WordPress APIs: #

• All plugin settings are stored via the options API.
• User data is securely handled using the usermeta API.
• AJAX requests are fully integrated with wp_ajax_ hooks.

✅ Sanitization and Escaping: #

• All inputs are sanitized using appropriate functions like:
  • sanitize_text_field()
  • sanitize_textarea_field()
  • wp_kses_post()
• Output is escaped via esc_html() and esc_url() to ensure frontend safety.

---

🔄 JavaScript Customization #

The frontend functionality is driven by a jQuery script within wp_footer. If you’re looking to override or extend it:

1. Deregister the existing script (if it were enqueued separately).
2. Add your own JavaScript by reusing the DOM hooks (e.g., #highlight-action-btn, .user-highlight).

⚠️ Modifying the plugin’s core file is not recommended. Use wp_enqueue_scripts with wp_add_inline_script() or custom JS files from your theme instead.

---

🧩 Custom Color Palettes #

You can pre-define or extend PRESET_COLORS in the JS:

const PRESET_COLORS = {
  yellow: '#fffd8c',
  green: '#c8ffbf',
  red:   '#ffc1e3',
  blue:  '#c1d8ff',
  orange:'#ffe4b2' // Add custom color here
};

To add new swatches visually, update the DOM structure in the color picker builder logic.

---

💬 Hook Possibilities (For Future Versions) #

Though the plugin is self-contained, future versions may offer:

• Filters for custom note fields
• Actions after saving/deleting highlights
• Third-party integrations (like saving notes to user dashboards)

You may register your own hooks around AJAX responses using:

add_action('wp_ajax_custom_save_hook', 'your_callback');

---

🚫 Known Conflicts #

Conflict Type	Solution
Third-party tooltip libraries (e.g., Tippy.js)	Ensure Z-index of #highlight-action-btn is higher
Frontend builders that manipulate selection ranges (e.g., Elementor, Divi)	Test with simple text blocks first and avoid nested builder blocks