Hero Color Picker adds a focused design panel to the WordPress post editor for styling hero sections.
Features:
- Two color controls:
Background Color and Font Color
- On-demand color pickers in compact dropdown popovers
- Live preview of both colors together directly in the sidebar
- Applies selected colors to the editor post summary area for a closer backend preview
- Removes the featured image preview outline while a custom background color is active
- Accessibility check for
WCAG AAA Normal Text with PASS / FAILED status
- Panel is shown only while editing posts (
post), not in template editing contexts
- Adds a core-like posts list view
Hero Background to show only posts with a custom hero background color
-
Works on elements that have the CSS class
hero-colored
Stored as post meta:
-
hero_color_picker_hero_color
hero_color_picker_font_color
Frontend output (only when values are set):
.hero-colored {
background-color: $background;
color: $font;
}
Important template setup:
- Open your block theme template (for example
Single) in the Site Editor.
- Select the
Group block that should receive the hero styles.
- In block settings, add
hero-colored to Additional CSS class(es).