Redux

# Palette Color

The Palette Color field allows you to display a set of color palettes that a theme or plugin might use throughout, giving your users a choice of UI colors.

Table of Contents

# Arguments

Name Type
Default
 Description
type string palette Value identifying the field type.
palettes array An array of individual arrays defining the color palettes. See "Setting Palettes" below.

Also See

# Setting Palettes

Each palette in the palette argument is a key/pair array that defines each individual palette. The key of the array is the palette name. Assigned to the key is an array of hex colors to be displayed in the palette entry. See the example below for a complete breakdown.

# Build Config

Build a Custom Configuration →
Changes you make to this form will be reflected in the generated code.
Field visibility requirements.
 
Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
    'type' => 'palette-color'
) );

# Example Config

Redux::set_section( 'OPT_NAME', array(
    'title'      => esc_html__( 'Palette Colors', 'your-textdomain-here' ),
    'id'         => 'color-palette',
    'subsection' => true,
    'fields'     => array(
        array(
            'id'       => 'opt-palette-color',
            'type'     => 'palette',
            'title'    => esc_html__( 'Palette Color Option', 'your-textdomain-here' ),
            'subtitle' => esc_html__( 'Only color validation can be done on this field type', 'your-textdomain-here' ),
            'desc'     => esc_html__( 'This is the description field, again good for additional info.', 'your-textdomain-here' ),
            'default'  => 'red',
            'palettes' => array(
                'red'  => array(
                    '#ef9a9a',
                    '#f44336',
                    '#ff1744',
                ),
                'pink' => array(
                    '#fce4ec',
                    '#f06292',
                    '#e91e63',
                    '#ad1457',
                    '#f50057',
                ),
                'cyan' => array(
                    '#e0f7fa',
                    '#80deea',
                    '#26c6da',
                    '#0097a7',
                    '#00e5ff',
                ),
            )
        ),
    )
) );

# Example Usage

This example in based on the example usage provided above. Be sure to change $redux_demo to the value you specified in your opt_name argument.

This field does NOT return the palette array. It returns the name of the selected palette. Ideally, the developer will have set the palette colors in their CSS, using the palette key name as the CSS selector.

global $redux_demo;

echo esc_html__( 'Selected palette: ', 'your-textdomain-here' ) . $redux_demo['opt-palette-color'];

← Password →