Color Picker Field in WordPress

A colour picker field lets an editor choose a colour and stores it in a form your CSS can use — useful for per-post accents without touching a stylesheet.

What It Does

The field stores a colour value. With Enable Transparency on, editors can also set an alpha channel, so the stored value can carry opacity.

Before You Start

• Nexter Extension is installed and active.
• Content Fields is enabled under Nexter → Content Fields.
• You have a field group, or are about to create one.

Add a Colour Picker Field

1. Go to Nexter → Content Fields and open the Group Fields tab.

2. Open a field group, or create a new one.

3. Click Add Field.

4. Set Field Label to Brochure accent. The Field Name fills in automatically and is what you use in code.

5. Set Field Type to Color Picker.

6. Turn on Enable Transparency if the colour needs an alpha channel.

7. Set Return Format to match what your CSS expects.

8. Click Update.

Field Settings

Every field is configured across four tabs. These are the settings this field type offers, read from the field group builder in Nexter Extension 4.9.0.

General

Setting	Options	What it does
Default Value		No help text in the UI.
Enable Transparency		No help text in the UI.
Return Format		No help text in the UI.

Validation

Setting	Options	What it does
Required		No help text in the UI.

Presentation

Setting	Options	What it does
Instructions		No help text in the UI.
Show Custom Palette		No help text in the UI.
Show Color Wheel		No help text in the UI.
Wrapper Attributes		No help text in the UI.

Conditional Logic

Setting	Options	What it does
Conditional Logic		No help text in the UI.

When to Use It

• A per-post accent colour.
• A brand colour on a client or partner entry.
• A category colour used in listing cards.

Display the Value

Escape the value before putting it in an inline style:

<?php
$accent = nxt_field_value( 'accent' );
if ( $accent ) {
    printf(
        '<div class="accent" style="--accent:%s">',
        esc_attr( $accent )
    );
}

Limitations

• The field stores a colour, not a contrast guarantee. An editor can pick a colour that fails contrast requirements against your background — constrain the palette in your CSS if accessibility matters.
• With transparency off, the stored value has no alpha channel, so an RGBA return format will always be fully opaque.

Troubleshooting

The colour does not apply on the front end

Check your CSS actually consumes the custom property or inline style you output. The field stores the value; it does not style anything by itself.

I need transparency but only get a solid colour

Turn on Enable Transparency on the field, then re-pick the colour — existing values keep their old format.

Related Docs

• Create your first field group
• Display a field value on the front end