Image Radio

The Image Radio controller allows users to select one option from a list of options displayed on image buttons.

Demonstration

 
Handy::control( 'image-radio', [
    'id'          => 'image_radio_id',
    'section'     => 'layout_section',
    'label'       => esc_html__( 'Image Radio Control', 'textdomain' ),
    'description' => esc_html__( 'Description Here', 'textdomain' ),
    'choices'     => [
        'bold' => [
            'title' => esc_html__( 'Bold', 'textdomain' ),
            'image' => trailingslashit( get_template_directory_uri() ) . 'images/bold.png'
        ],
        'italic' => [
            'title' => esc_html__( 'Italic', 'textdomain' ),
            'image' => trailingslashit( get_template_directory_uri() ) . 'images/italic.png'
        ],
        'allcaps' => [
            'title' => esc_html__( 'All Caps', 'textdomain' ),
            'image' => trailingslashit( get_template_directory_uri() ) . 'images/allcaps.png'
        ],
        'underline' => [
            'title' => esc_html__( 'Underline', 'textdomain' ),
            'image' => trailingslashit( get_template_directory_uri() ) . 'images/underline.png'
        ]
    ]
]);

TIP

Here's an example using the default parameter. Note the default value must exist in defined choices.

 
Handy::control( 'image-radio', [
    'id'          => 'image_radio_id',
    'section'     => 'layout_section',
    'default'     => 'bold',
    'label'       => esc_html__( 'Image Radio Control', 'textdomain' ),
    'description' => esc_html__( 'Description Here', 'textdomain' ),
    'choices'     => [
        'bold' => [
            'title' => esc_html__( 'Bold', 'textdomain' ),
            'image' => trailingslashit( get_template_directory_uri() ) . 'images/bold.png'
        ],
        'italic' => [
            'title' => esc_html__( 'Italic', 'textdomain' ),
            'image' => trailingslashit( get_template_directory_uri() ) . 'images/italic.png'
        ],
        'allcaps' => [
            'title' => esc_html__( 'All Caps', 'textdomain' ),
            'image' => trailingslashit( get_template_directory_uri() ) . 'images/allcaps.png'
        ],
        'underline' => [
            'title' => esc_html__( 'Underline', 'textdomain' ),
            'image' => trailingslashit( get_template_directory_uri() ) . 'images/underline.png'
        ]
    ]
]);

TIP

Here's an example using the display and size parameters. Note the display value accepts only inline or block, while size value accepts only an array data type with two elements the width and height.

 
Handy::control( 'image-radio', [
    'id'          => 'image_radio_id',
    'section'     => 'layout_section',
    'default'     => 'bold',
    'label'       => esc_html__( 'Image Radio Control', 'textdomain' ),
    'description' => esc_html__( 'Description Here', 'textdomain' ),
    'display'     => 'inline',
    'size'        => [
        'width'  => '60px',
        'height' => '50px'
    ],
    'choices'     => [
        'bold' => [
            'title' => esc_html__( 'Bold', 'textdomain' ),
            'image' => trailingslashit( get_template_directory_uri() ) . 'images/bold.png'
        ],
        'italic' => [
            'title' => esc_html__( 'Italic', 'textdomain' ),
            'image' => trailingslashit( get_template_directory_uri() ) . 'images/italic.png'
        ],
        'allcaps' => [
            'title' => esc_html__( 'All Caps', 'textdomain' ),
            'image' => trailingslashit( get_template_directory_uri() ) . 'images/allcaps.png'
        ],
        'underline' => [
            'title' => esc_html__( 'Underline', 'textdomain' ),
            'image' => trailingslashit( get_template_directory_uri() ) . 'images/underline.png'
        ]
    ]
]);

Basic Usage

 
// Return a string.
$value = get_theme_mod( 'image_radio_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	`string` `optional` The predetermined value of the control. The `default` value must exist in defined `choices`. Default empty.
choices	`array` `required` The array-based list of predetermined options or choices. Each choice contains the `title` and `image`. `title` `string` `required` The title or label of each choices. `image` `string` `required` The image path or directory of the target image.
display	`string` `optional` The image radio's display behavior. Accepts only `inline` or `block`. Default `inline`.
size	`array` `optional` The image radio's size. Accepts only an `array` data type with two elements the `width` and `height`. 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.