WordPress Customizer Radio Image Control
A radio control using images for the WordPress Customizer
Installation
Add the following to your composer.json file and run composer update
"repositories": [
{
"type": "git",
"url": "https://github.com/helgatheviking/kia-customizer-radio-image-control.git"
}
],
"require": {
"helgatheviking/kia-customizer-radio-image-control": "dev-main"
},
"extra": {
"installer-paths": {
"includes/{$name}": [
"helgatheviking/kia-customizer-radio-image-control"
]
}
Adding the control
/**
* Add range slider to Customizer.
*
* @param obj $wp_customize
*/
function kia_customizer( $wp_customize ) {
// Include the class
require_once dirname( __FILE__ ) . '/includes/kia-customizer-radio-image-control/class-kia-customizer-radio-image-control.php';
// Register the control types that we're using as JavaScript controls.
$wp_customize->register_control_type( 'KIA_Customizer_Radio_Image_Control' );
$wp_customize->add_setting(
'my_setting',
array(
'default' => 'tabular',
'type' => 'option',
'capability' => 'edit_themes',
'sanitize_callback' => array( 'KIA_Customizer_Radio_Image_Control', 'sanitize' ),
'sanitize_js_callback' => array( 'KIA_Customizer_Radio_Image_Control', 'sanitize' ),
)
);
$wp_customize->add_control(
new KIA_Customizer_Radio_Image_Control(
$wp_customize,
'my_setting',
array(
'label' => __( 'Layout', 'your-textdomain' ),
'section' => 'my_section',
'settings' => 'my_setting',
'choices' => array(
'tabular' => array(
'label' => esc_html__( 'List', 'your-textdomain' ),
'image' => 'assets/images/th-list.svg', // URL to image.
),
'grid' => array(
'label' => esc_html__( 'Grid', 'your-textdomain' ),
'image' => 'assets/images/th-grid.svg', // URL to image.
),
),
),
)
);
}
add_action( 'customize_register', 'kia_customizer' );Credits
Huge props to Rich Tabor's Login Designer.