Color picker and Icon picker

This page covers two small picker types: the Color picker, which stores a hex color, and the Icon picker, which stores a Dashicons class name.

Color picker

Stores one hex color such as #ff0000, chosen with WordPress's own color picker.

What is accepted

The value must be a hex color: # followed by 3 or 6 hexadecimal digits. Letter case is normalised to lowercase.

Transparency (alpha) is not supported. A refused value saves an empty field.

Length rules are ignored for this type (the builder does not offer them).

Template usage

$color = wpmcf_get_field( 'brand', 'accent' );      // "#ff6600" or null

if ( $color ) {
    printf( '<div style="background-color:%s">Sale</div>', esc_attr( $color ) );
}

[wpmcf_field group="brand" field="accent" wrap="false"]   → #ff6600

The shortcode and wpmcf_the_field() print only the code, not a colored box. Use it inside a style attribute or a CSS variable:

echo '<style>:root{--accent:' . esc_html( (string) wpmcf_get_field( 'brand', 'accent', 'option' ) ) . ';}</style>';

Edit screen

A small swatch next to a text box. Clicking it opens the core color picker (a color wheel and a text box for the hex code). In front-end forms (Pro) the field is a plain text box with the placeholder #000000.

Icon picker

Stores one icon from the Dashicons set that ships with WordPress (the icons of the admin menu).

Edit screen

A Choose icon button opens a searchable grid of icons. After picking, the button shows the icon and its name; Clear removes it.

What is accepted

dashicons-admin-home and admin-home both save as dashicons-admin-home. A name that is not a Dashicons icon (nope-icon) or just the prefix is refused and the field is saved empty. The list of valid names is read from your WordPress installation, so it follows the WordPress version.

Template usage

$icon = wpmcf_get_field( 'service', 'icon' );          // "dashicons-admin-home"
if ( $icon ) {
    printf( '<span class="dashicons %s" aria-hidden="true"></span>', esc_attr( $icon ) );
}

[wpmcf_field group="service" field="icon" wrap="false"]

Printing the field loads the dashicons stylesheet on the front end, which core normally only loads for logged-in users. If you only need the class name (to use another icon font, for example), read it with wpmcf_get_field() and map it yourself.

Dashicons are WordPress's admin icons. For brand icons or custom SVGs, use an Image field with an SVG file, or a Text field holding the class of your icon library.

Troubleshooting

• The color field is empty after saving. The value was not a 3 or 6 digit hex color with a leading #.
• The icon does not show on the site. Use the shortcode or wpmcf_the_field() (they load the Dashicons stylesheet), or enqueue dashicons yourself when you print the class.
• I cannot find my icon in the picker. Only core Dashicons are listed.