Duotone

PRO

The Duotone controller allows users to select a shadow and highlight color by using a visual color user interface.

Demonstration

 
Handy::control( 'duotone', [
    'id'          => 'duotone_id',
    'section'     => 'layout_section',
    'label'       => esc_html__( 'Duotone Control', 'textdomain' ),
    'description' => esc_html__( 'Description Here', 'textdomain' ),
    'priority'    => 1
]);

TIP

Here's an example using the default parameter. Note the default value accepts only an array data type that contains two elements. The first element is the shadow color and the last element is the highlight color.

 
Handy::control( 'duotone', [
    'id'          => 'duotone_id',
    'section'     => 'layout_section',
    'default'     => [ '#000000', '#ffffff' ],
    'label'       => esc_html__( 'Duotone Control', 'textdomain' ),
    'description' => esc_html__( 'Description Here', 'textdomain' ),
    'priority'    => 1
]);

TIP

Here's an example using color_sets parameter. Note the color_sets value accepts only an array data type that contains a group of predefined color sets. Each color set contains the shadow color and highlight color.

 
Handy::control( 'duotone', [
    'id'          => 'duotone_id',
    'section'     => 'layout_section',
    'default'     => [ '#000000', '#ffffff' ],
    'label'       => esc_html__( 'Duotone Control', 'textdomain' ),
    'description' => esc_html__( 'Description Here', 'textdomain' ),
    'priority'    => 1,
    'color_sets'  => [
        [ '#000000', '#7f7f7f' ],
        [ '#000000', '#ffffff' ],
        [ '#9001be', '#fffc41' ],
        [ '#060097', '#fc4944' ],
        [ '#010101', '#009ef7' ],
        [ '#c5015a', '#fcee76' ],
        [ '#a90073', '#66ff61' ]
    ]
]);

Basic Usage

 
// Return an array.
$values = get_theme_mod( 'duotone_id' );

Parameters

Name	Description
id	`string` `required` The unique slug like string used as an ID and also as an index name in storing data in a database.
section	`string` `required` The ID of the section in which the control will be displayed.
default	`array` `optional` The predetermined value of the control. Accepts only an `array` data type that contains two elements. The first element is the `shadow color` and the last element is the `highlight color`. Default empty `array`.
color_sets	`array` `optional` The duotone's group of color sets. Accepts only an `array` data type that contains a sets of predefined color set. Each color set contains the `shadow color` and `highlight color`. Default empty `array`.
label	`string` `optional` The label or title of the control to show in the UI. Default empty.
description	`string` `optional` The description of the control to show in the UI. Default empty.
priority	`integer` `optional` The order of control appears in the section. Default `0`.
validations	`array` `optional` The set of validations used to validate the value of the control. For further details, read validations. Default empty.
active_callback	`callable` `optional` A callback function that determines the visibility of a control, whether to show or hide depending on a condition. For further details, read active_callback. Default empty.
sanitize_callback	`callable` `optional` A callback function that sanitizes the value of control before storing it in the database. Note that this is only optional since each control is already well sanitized. For further details, read sanitize_callback. Default empty.