Extend Customizer Options To Include Radio Image Option

WordPress allows you to customize the customizer options as required for your site. You can do whatever you like to extend the WordPress Customizer options. However, here we will study about how to extend it to add the radio image option in the Customizer.

WordPress Customizer

So, first of all let’s have a surface look on the WordPress Customizer. So, what is WordPress Customizer Options really? Well, it is the feature within WordPress from which within, you can add the theme options in your theme and make the WordPress theme dynamic.

As for eg: let us build the WordPress magazine theme, in which you may want or do not want to add the sticky menu in your site. So, how about adding up this feature into your theme? Well, its not hard since you are on good place since using WordPress for same. As we told earlier, this, WordPress Customizer Options helps you to add such feature within your theme.

You can learn on more about the Customizer Options here.

Extend Customizer Options To Add Radio Image Option

Since we now know some knowledge on the WordPress Cutomizer, now let’s move ahead and create the Radio Image Option within your theme via extending the Customizer API.

First of all, to use the Customizer Options, you need to hook it to the proper WordPress hook, ie, in the customize_register hook. So, let’s move ahead and create the function which carries this customizer options within your theme.

In your file, say it customizer.php, you need to add the function as below to register the customizer options into your theme:

function theme_slug_customize_register($wp_customize) {
// Customizer options goes here.

add_action('customize_register', 'theme_slug_customize_register');

Now, after you have added that above PHP code into the theme’s file then, let’s move ahead and extend the WordPress customizer site to include the radio image option within it. First of all, what you need to know is, you need to extend the WP_Customize_Control class to extend the Customizer options. So, let’s extend it to include the custom radio image option control.

For this, let’s create a new class Theme_Slug_Image_Radio_Control to extend the above class WP_Customize_Control. Now, since the controls are always rendered hence, we need to extend the render_content() function, which resides within this class. So, let’s move ahead and extend this class about adding the radio image option within customizer option.

Now, you just need to add the below PHP code within any of the included PHP files:

class Theme_Slug_Image_Radio_Control extends WP_Customize_Control {

public function render_content() {

if (empty($this->choices))

$name = '_customize-radio-' . $this->id;
<span class="customize-control-title"><?php echo esc_html($this->label); ?></span>
<ul class="controls" id='theme-slug-img-container'>
foreach ($this->choices as $value => $label) :
$class = ($this->value() == $value) ? 'theme-slug-radio-img-selected theme-slug-radio-img-img' : 'theme-slug-radio-img-img';
<li style="display: inline;">
<input <?php $this->link(); ?>style = 'display:none' type="radio" value="<?php echo esc_attr($value); ?>" name="<?php echo esc_attr($name); ?>" <?php
checked($this->value(), $value);
?> />
<img src='<?php echo esc_url($label); ?>' class='<?php echo esc_attr($class); ?>' />


Adding Required CSS And JS To Display/Function The Radio Image Option Properly

As we covered up the PHP code to extend the customizer options to add the radio image option within customizer options, now we also need to apply the CSS and JS to function it properly. So, to apply the required CSS and JS effect for the desired effect, you can create a new function and then hook that to the customize_controls_enqueue_scripts function, ie, enqueue CSS and JS for the radio controls in the mentioned WordPress hook.

Here, in the enqueued CSS file, you can add the below CSS code within it to apply some designs:

#theme-slug-img-container .theme-slug-radio-img-img {
border: 3px solid #DEDEDE;
margin: 0 5px 5px 0;
cursor: pointer;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
#theme-slug-img-container .theme-slug-radio-img-selected {
border: 3px solid #AAA;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
input[type=checkbox]:before {
content: '';
margin: -3px 0 0 -4px;

And for the JS file, you can add the below JS code for desired changes, ie, clicking on the radio image and change the options as required:

jQuery(document).ready(function () {
jQuery('.controls#theme-slug-img-container li img').click(function () {
jQuery('.controls#theme-slug-img-container li').each(function () {

Now, if you followed this tutorial along, you are now ready to use this radio image option within the customizer options, which we will cover below.

Use the Radio Image Options In Customizer

Now, since you learned about extending the customizer option to include the radio image option, now, you can apply the extended customizer options as below within the above created function, ie, inside the function theme_slug_customize_register as below:

function theme_slug_customize_register($wp_customize) {
// Customizer options goes here.
$wp_customize->add_section('theme_slug_default_layout_setting', array(
'priority' => 1,
'title' => esc_html__('Default Layout', 'theme-textdomain'),

$wp_customize->add_setting('theme_slug_default_layout', array(
'default' => 'right_sidebar',
'capability' => 'edit_theme_options',

$wp_customize->add_control(new theme_slug_Image_Radio_Control($wp_customize, 'theme_slug_default_layout', array(
'type' => 'radio',
'label' => esc_html__('Select default layout', 'theme-textdomain'),
'section' => 'theme_slug_default_layout_setting',
'settings' => 'theme_slug_default_layout',
'choices' => array(
'right_sidebar' => get_template_directory_uri() . '/img/right-sidebar.png',
'left_sidebar' => get_template_directory_uri() . '/img/left-sidebar.png',
'no_sidebar_full_width' => get_template_directory_uri() . '/img/no-sidebar-full-width-layout.png',
'no_sidebar_content_centered' => get_template_directory_uri() . '/img/no-sidebar-content-centered-layout.png'

add_action('customize_register', 'theme_slug_customize_register');

Here above, the main extending part is $wp_customize->add_control(new theme_slug_Image_Radio_Control($wp_customize, 'theme_slug_default_layout', array())); from which, the extended customizer options will take part.

Output Of The Radio Image Option Customizer Options

You can see the output of the extended radio option as below:

You may also want to read:

  1. Integrate Bootstrap NavBar 4 Into WordPress Theme
  2. Selective Refresh In Customizer Options
  3. Enqueue Custom CSS And JavaScript Libraries In WordPress


If you have successfully followed this tutorial and have became successfully able to implement the radio image option within your theme then, we can assume that you are now more familiar on this than before. But, if you are still confused about how to do it and want more help on this then do drop the comment below in the comment box and we will follow it up.

Post navigation

Bishal Napit

Bishal Napit is a WordPress theme developer from Tansen, Palpa, with a passion to learn more on WordPress.

2 thoughts on “Extend Customizer Options To Include Radio Image Option

  1. Congratulations for your great work. I would like to ask you if in the WordPress customizer following your guide but modifying it you can choose between 3 or 4 images uploaded by me (transparent textures) and appear with Inserted in the css above an image background of a section. Thank you very much. (I only ask if you can do)

    1. For that, what you can do is, utilize this: WP_Customize_Image_Control within your customize option to upload the image. Now, to display it within your site, edit the section where it is needed, and add the inline CSS style within that div to display as the background image. Hope you have got it about how to implement.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.