When creating a dynamic set of options, you should always provide an end user with a set of choices, and radio type options in Titan Framework can help in this regard. Let's see how you can create radio type options inside a WordPress custom admin panel, a meta box or the theme customizer.

The Radio Type Button in Titan Framework

A set of radio type buttons can be added with Titan Framework, from which you can select a single option. It appears like this:

This option type supports the following parameters:

• name: It shows the display name of the radio type option.
• id: This parameter assigns a unique name which helps to get the saved options values.
• options: It is an associative array which takes up value–label pair options displayed as radio buttons.
• default: (Optional) It assigns a default value.
  
• desc
• livepreview: (Optional) This parameter displays the live preview of changes when a radio type option is added inside a theme customizer section.
• css: (Optional) Whenever you add this option inside an admin page and/or theme customizer section, this parameter automatically generates CSS.

All the parameters are of type string except the options parameter, which is array by type.

Available Containers for the Radio Type Option

The radio type option can be created inside: 

• Admin Panel
• Admin Tabs
• Metabox
• Theme Customizer Section

The general format of adding this option is the same:

• Get a unique instance via the getInstance() function.
• Add an option via the createOption() function.
• Get saved values via the getOption() function.

However, if you want to learn about how these containers are created with Titan Framework then skim through my previous articles.

Creating a Radio Type Option Inside an Admin Panel

Example Declaration

First I'll create this option type inside an admin panel.

<?php
    /**
     * 
     * Create the options
     *
     */
    $aa_panel->createOption( array(

        'id'      => 'aa_radio', // The ID which will be used to get the value of this option
        'type'    => 'radio', // Type of option we are creating
        'name'    => 'Choose Radio Buttons', // Name of the option which will be displayed in the admin panel
        'desc'    => 'This is our option', // Description of the option which will be displayed in the admin panel
        'default' => 'aa_bdy', //Default value of radio buttons
        'options' => array(
                            'aa_hdr' => 'Header',
                            'aa_bdy' => 'Body',
                            'aa_ftr' => 'Footer'
                    ) 
        
    ) );

I'm adding a radio type option in an admin panel $aa_panel via the createOption() function in line #7. As you can see, this function takes up an array of parameters which this option supports. So, I've defined values for parameters id, type, name, desc, default and options.

In this code, I created a list of three radio buttons named Header, Body and Footer, each having a unique key, i.e. aa_hdr, aa_bdy and aa_ftr. Think of it like a set of options which you want an end user to choose from. For example, if you want to display a note, a user could choose if it should be displayed in the header, body or footer.

You can find a radio type option inside an admin panel Neat Options.

Example Usage

Let's get its saved values.

<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it.

// 2. Get the value via ID using getOption function
$aa_radio_val = $titan->getOption( 'aa_radio' );

/**
 * 
 * Print option values
 * 
 */
if ( 'aa_hdr' == $aa_radio_val ) {               

    echo 'You Selected Header';                 

} elseif ( 'aa_bdy' == $aa_radio_val) {

    echo 'You selected Body';       

} else {

    echo 'You selected Footer';         
}   

?>

First of all, get a unique instance value in line #3. Then use the getOption() function, which takes up the ID aa_radio as a parameter (line #6). Finally, lines #14 to #28 are used to print the values at the front-end via simple if-else check statements in PHP.

According to these statements:

• If the value of variable $aa_radio_val equals the label aa_hdr then print 'You Selected Header'.
• If the value of variable $aa_radio_val equals the label aa_bdy then print 'You Selected Body'.
• If the value of labels is not aa_hdr or aa_bdy then print 'You Selected Footer'.

Displaying the Result at the Front-End

Suppose I selected Header as a demo value.

Now, this setting should print 'You Selected Header' like this:

Creating a Radio Type Option Inside an Admin Tab

Example Declaration

Let's create this option type inside an admin tab.

<?php

    /**
     * 
     * Create radio type option in an admin tab
     * 
     */
    $aa_tab1->createOption( array(

        'id'      => 'aa_radio_in_tab1_panel2', // IDs should always be unique. The ID which will be used to get the value of this option
        'type'    => 'radio', // Type of option we are creating
        'name'    => 'Choose Radio Buttons', // Name of the option which will be displayed in the admin panel
        'desc'    => 'This is our option', // Description of the option which will be displayed in the admin panel
        'default' => 'aa_bdy', //Default value of radio buttons
        'options' => array(
                            'aa_hdr' => 'Header',
                            'aa_bdy' => 'Body',
                            'aa_ftr' => 'Footer'
                    )
     ) );

Now I'll add this option in an admin tab $aa_tab1 via the createOption() function. Its ID is aa_radio_in_tab1_panel2.

The above screenshot shows this option in Tab 1 of Neat Options 2.

Example Declaration

Let's write the code for getting the saved values.

<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it.

// 2. Get the value via ID using getOption function
$aa_radio_in_tab1_panel2_val = $titan->getOption( 'aa_radio_in_tab1_panel2' );

/**
 * 
 * Print option values
 * 
 */
if ( 'aa_hdr' == $aa_radio_in_tab1_panel2_val ) { 
    
    echo 'You Selected Header';                 
        
} elseif ( 'aa_bdy' == $aa_radio_in_tab1_panel2_val ) {
    
    echo 'You Selected Body';       
    
} else {
    
    echo 'You Selected Footer';         
     
}   

?>

The process of getting the saved options values is pretty much the same. So, instead of going into details I'm listing the points:

• First call a unique instance via the getInstance() function in line #3.
• Then use the getOption() function and register the ID aa_radio_in_tab1_panel2.
• Save this value inside a new variable $aa_radio_in_tab1_panel2_val in line #6.
• Next print the values at the front-end via an if-else check, i.e. lines #14 to #28.

Displaying the Result at the Front-End

I selected Body. Now this setting should print 'You Selected Body' at the front-end. Here is the screenshot:

Creating a Radio Type Option Inside a Metabox

Example Declaration

Now I'll write the code for a metabox.

<?php
    /**
     * 
     * Create the options
     *
     */
    $aa_metbox->createOption( array(

        'id'      => 'aa_mb_radio', // The ID which will be used to get the value of this option
        'type'    => 'radio', // Type of option we are creating
        'name'    => 'Choose Radio Buttons', // Name of the option which will be displayed 
        'desc'    => 'This is our option', // Description of the option which will be displayed
        'default' => 'aa_bdy', //Default value of radio buttons
        'options' => array(
                            'aa_hdr' => 'Header',
                            'aa_bdy' => 'Body',
                            'aa_ftr' => 'Footer'
                        )

    ) );

This time I added a radio type option in a metabox $aa_metbox with ID aa_mb_radio.

You can find this option named Choose Radio Buttons in a metabox. This screenshot is of a page editing screen. You will find similar option displayed in your post editing screens as well.

Example Usage

Now I'll show how you can get a saved value in a metabox. 

<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it.

// 2. Get the value via ID using getOption function
$aa_mb_radio_val = $titan->getOption( 'aa_mb_radio', get_the_ID() );

/**
 * Print option values
 * 
 */
if ( 'aa_hdr' == $aa_mb_radio_val ) {    

    echo 'You Selected Header';                 

} elseif ( 'aa_bdy' == $aa_mb_radio_val ) {
       
    echo 'You Selected Body';       
        
} else {
 
    echo 'You Selected Footer';             

}   

The entire code is the same, except in line #6 where I've used the get_the_ID() function, which helps to fetch the saved value from any specific page or post ID.

Displaying the Result at the Front-End

This time I chose Footer as the demo value. At the front-end, 'You Selected Footer' should print like this:

Creating a Radio Type Option in a Theme Customizer Section

Example Declaration

Here is its code.

<?php
    /**
     * 
     * Create the option
     *
     */
    $aa_section1->createOption( array(

        'id'      => 'aa_sec_radio', // The ID which will be used to get the value of this option
        'type'    => 'radio', // Type of option we are creating
        'name'    => 'Choose Radio Buttons', // Name of the option which will be displayed 
        'desc'    => 'This is our option', // Description of the option which will be displayed
        'default' => 'aa_bdy', //Default value of radio buttons
        'options' => array(
                            'aa_hdr' => 'Header',
                            'aa_bdy' => 'Body',
                            'aa_ftr' => 'Footer'
                        )

    ) );

In the end, I'll add this option in a theme customizer section $aa_section1 whose unique ID is aa_sec_radio.

You can find a list of radio options inside the Section 1 tab.

Example Usage

Let's retrieve the values.

<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it.

// 2. Get the value via ID using getOption function
$aa_sec_radio_val = $titan->getOption( 'aa_sec_radio', get_the_ID() );

/**
 * 
 * Print option values
 * 
 */
if ( 'aa_hdr' == $aa_sec_radio_val ) {

    echo 'You Selected Header';                 

} elseif ( 'aa_bdy' == $aa_sec_radio_val ) {
       
    echo 'You Selected Body';       
        
} else {
 
    echo 'You Selected Footer';         
        
}   

Once again, getting the saved options values is done in the same manner. Only the ID and variable names are different.

Displaying the Result at the Front-End

Here's a screenshot of the live changes which take place when I change the option settings.

Now I'll show you how to display color palettes in the form of radio options inside a custom WordPress admin panel, a metabox, or a section of your theme customizer.

The Radio-Palette Type Option in Titan Framework

In Titan Framework, there is a cool option type, radio-palette. It can be used to offer color palettes inside your theme. Here is what it looks like:

Let's discuss the settings of this option.

• name: This parameter shows the display name.
• id: It defines a unique name which gets the saved values.
• desc: A brief description which appears with the option name.
• options: This defines a two-dimensional array which has sets of hex color values.
• default: (Optional) It defines the options index of the default palette/color array. 
• livepreview: (Optional) This parameter displays the live preview of changes when a radio-palette type option is added inside a theme customizer section.
• css: (Optional) Whenever you add this option inside an admin page and/or theme customizer section, this parameter automatically generates CSS.

All the parameters are of type string, except the options which is array by type.

Available Containers for the Radio-Palette Type Option

You can add this option inside: 

• Admin Panel
• Admin Tabs
• Metabox
• Theme Customizer Section

During its creation, you will follow a similar format:

• Get a unique instance via the getInstance() function.
• Add an option via the createOption() function.
• Get the saved values via the getOption() function. 

The explanation of creating these containers is beyond the scope of this article. However, you can find their detail in previous articles of this series.

Creating a Radio-Palette Type Option Inside an Admin Panel

Example Declaration

Let's create this option type inside an admin panel.

<?php
    /**
     * Create the radio-palette type option
     *
     * 
     *
     */
    $aa_panel->createOption( array(


        'id'      => 'aa_rad_palette', // The ID which will be used to get the value of this option
        'type'    => 'radio-palette', // Type of option we are creating
        'name'    => 'Radio Palette Option', // Name of option we are creating
        'desc'    => 'Choose an option', // Brief description about the option 
        'options' => array(              // A 2-dimentional array containing hex color values sets
                            array(
                                "#69D2E7",
                                "#A7DBD8",
                                "#E0E4CC",
                                "#F38630",
                                "#FA6900",
                            ),
                            
                            array(
                                "#D9CEB2",
                                "#948C75",
                                "#D5DED9",
                                "#7A6A53",
                                "#99B2B7",
                            ),

                            array(
                                "#004358",
                                "#1F8A70",
                                "#BEDB39",
                                "#FFE11A",
                                "#FD7400",
                            ),

    ) ) );

In line #8, I'm adding a radio-palette type option in an admin panel $aa_panel via the createOption() function. This function takes up an array of parameters which I've defined above. 

I defined the unique ID as aa_rad_palette in line #11. The most important parameter is defined in line #15 which is the options parameter. It's a two-dimensional array, which takes up multiple hex color values. Each array set adds a color palette. So between line #16 and #38 there are three such arrays; hence three options of color palette. 

In the above screenshot, there are three color palettes which appear against the name Radio Palette Option inside admin panel Neat Options.

Example Usage

Now I'll write the code for getting the saved options values.

<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it.

// 2. Get the value via ID using getOption function
$aa_rad_palette_val = $titan->getOption( 'aa_rad_palette' );

<?php
/**
 *  Print Admin panel option values
 */
			
?>

<div>
    The contents of the selected palette in an admin panel are: <?php var_dump($aa_rad_palette_val); ?>
</div>

The return value mechanism of this option works in such a way that it returns all the colors' hex values of the selected palette. So, to get these values, call an instance via the getInstance() function in line #3. Make sure that you register a unique parameter with this function. I'll recommend keeping your theme name. That's why I used neat here.

In line #6, use the getOption() function, which retrieves the saved values by registering the option ID, i.e. aa_rad_palette. I saved its result to a new variable,  $aa_rad_palette_val.

As I've mentioned, the return values are the colors of the selected palette. So, adopt a method which prints the array contents, for example:

• using the var_dump() function
• using the print_r() function 

I'm using the var_dump() function to see what gets saved in $aa_rad_palette_val. 

Displaying the Result at the Front-End

Suppose I selected the second color palette:

Here's the screenshot of the front-end:

All the array contents of the second color palette get printed as shown above. Now you can easily use these values by accessing any element of this array, e.g. $aa_rad_palette_val[0] will provide you with #D9CEB2 hex color.

Creating a Radio-Palette Type Option Inside an Admin Tab

Example Declaration

Now I'll add this option inside an admin tab.

<?php
    /**
     * Create the radio-palette type option
     *
     * 
     *
     */
    $aa_tab1->createOption( array(


        'id'      => 'aa_rad_palette_in_tab1_panel2', // The ID which will be used to get the value of this option
        'type'    => 'radio-palette', // Type of option we are creating
        'name'    => 'Radio Palette Option', // Name of option we are creating
        'desc'    => 'Choose an option', // Brief description about the option 
        'options' => array(              // A 2-dimentional array containing hex color values sets
                            array(
                                "#69D2E7",
                                "#A7DBD8",
                                "#E0E4CC",
                                "#F38630",
                                "#FA6900",
                            ),
                            
                            array(
                                "#D9CEB2",
                                "#948C75",
                                "#D5DED9",
                                "#7A6A53",
                                "#99B2B7",
                            ),

                            array(
                                "#004358",
                                "#1F8A70",
                                "#BEDB39",
                                "#FFE11A",
                                "#FD7400",
                            ),

    ) ) );

This time I'm adding a radio palette inside an admin tab $aa_tab1 with ID aa_rad_palette_in_tab1_panel2. Once again, I'm defining three arrays of color values, i.e. three color palette options.

Here is the screenshot, where you can find a radio-palette type option in Tab 1 of admin panel Neat Option 2.

Example Usage

Let's get the saved options values.

<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it.

// 2. Get the value via ID using getOption function
$aa_rad_palette_in_tab1_panel2_val = $titan->getOption( 'aa_rad_palette_in_tab1_panel2' );

<?php
/**
 *  Print Admin tab option values
 */
			
?>
			
<div>
    The contents of the selected palette in an admin tab are: <?php var_dump($aa_rad_palette_in_tab1_panel2_val); ?>
</div>

The code is exactly the same, so I'm summarizing all its points:

• Get a unique instance in line #3.
• Retrieve the saved value via the getOption() function in line #6.
• Print the array contents via the var_dump() function in line #16.

Displaying the Result at the Front-End

This time I choose the first palette, and here are its contents.

Creating a Radio-Palette Type Option Inside a Metabox

Example Declaration

Let's create a radio-palette type option in a metabox.

<?php
    /**
     *
     * Create the radio-palette type option
     *
     */
    $aa_metbox->createOption( array(


        'id'      => 'aa_mb_rad_palette', // The ID which will be used to get the value of this option
        'type'    => 'radio-palette', // Type of option we are creating
        'name'    => 'Radio Palette Option', // Name of option we are creating
        'desc'    => 'Choose an option', // Brief description about the option 
        'options' => array(              // A 2-dimentional array containing hex color values sets
                            array(
                                "#69D2E7",
                                "#A7DBD8",
                                "#E0E4CC",
                                "#F38630",
                                "#FA6900",
                            ),
                            
                            array(
                                "#D9CEB2",
                                "#948C75",
                                "#D5DED9",
                                "#7A6A53",
                                "#99B2B7",
                            ),

                            array(
                                "#004358",
                                "#1F8A70",
                                "#BEDB39",
                                "#FFE11A",
                                "#FD7400",
                            ),

    ) ) );

A radio-palette type option exists in a metabox $aa_metbox with a unique ID aa_mb_rad_palette. The createOption() function in line #8 takes up the same list of parameters which I've mentioned in previous examples.

The above screenshot shows a page editing screen, and right at the end, a Radio Palette Option is displayed in a metabox.

Example Usage

Here is the code.

<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it.

// 2. Get the value via ID using getOption function
$aa_mb_rad_palette_val = $titan->getOption( 'aa_mb_rad_palette', get_the_ID() );

<?php
/**
 *  Print Metabox option values
 */

?>

<div>
    The contents of the selected palette in a metabox are: <?php var_dump($aa_mb_rad_palette_val); ?>
</div>

In line #6, there is an additional get_the_ID() function which provides the ID for a specific page/post or a post_type. The rest of the code is same.

Displaying the Result at the Front-End

Choose the third color palette, for example, and save the results. Here are the array contents:

Creating a Radio-Palette Type Option Inside a Theme Customizer Section

Example Declaration

In the end, I'll add this option in a customizer section.

<?php
    /**
     *
     * Create the radio-palette type option
     *
     */
    $aa_section1->createOption( array(


        'id'      => 'aa_sec_rad_palette', // The ID which will be used to get the value of this option
        'type'    => 'radio-palette', // Type of option we are creating
        'name'    => 'Radio Palette Option', // Name of option we are creating
        'desc'    => 'Choose an option', // Brief description about the option 
        'options' => array(              // A 2-dimentional array containing hex color values sets
                            array(
                                "#69D2E7",
                                "#A7DBD8",
                                "#E0E4CC",
                                "#F38630",
                                "#FA6900",
                            ),
                            
                            array(
                                "#D9CEB2",
                                "#948C75",
                                "#D5DED9",
                                "#7A6A53",
                                "#99B2B7",
                            ),

                            array(
                                "#004358",
                                "#1F8A70",
                                "#BEDB39",
                                "#FFE11A",
                                "#FD7400",
                            ),

    ) ) );

This code adds a radio-palette type option in a theme customizer section$aa_section in pretty much the same way.

There is a My Section theme customizer section in which there are three options of color palettes named Radio Palette Option. 

Example Usage

Let's write the code to get the options values.

<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it.

// 2. Get the value via ID using getOption function
$aa_sec_rad_palette_val = $titan->getOption( 'aa_sec_rad_palette' );

<?php
/**
 * Print Customizer option values
 */
?>

<div>
    The contents of the selected palette in a theme customizer section are: <?php var_dump($aa_sec_rad_palette_val); ?>
</div>

The code for getting the values from a theme customizer section is almost the same. Only the ID and variable names are different. So, you may refer to the details written above.

Displaying the Result at the Front-End

Here is a screenshot of the live changes which take place.

Finally, we're going to explore yet another option type in Titan Framework, theradio-image option, which displays a set of radio buttons with image labels. Today, I am going to write about how you can use the radio-image type option inside a custom admin panel, a metabox, or the theme customizer.

The Radio-Image Type Option in Titan Framework

This option type allows the user to select any image from a list of options which appear as radio buttons. The radio-image option in Titan Framework looks like this:

Let's list the parameters of this option:

• name: It displays the name of the option type.
• id: It assigns a unique name which gets the values.
• desc: This parameter adds a brief description to the option type.
• options: (Optional) This defines a two-dimensional array which contains value and image URL pairs.
• default: (Optional) It defines the default value of the option.
• livepreview: (Optional) This parameter displays a live preview of changes when a radio-image type option is added inside a theme customizer section.
• css: (Optional) Whenever you add this option inside an admin page and/or theme customizer section, this parameter automatically generates CSS.

The options parameter is array by type, while the rest are string. 

Available Containers for the Radio-Image Type Option

This option type can be added inside: 

• Admin Panel
• Admin Tabs
• Metabox
• Theme Customizer Section

Irrespective of the container type, the option is added via the following method:

• Get a unique instance through the getInstance() function.
• Add an option through the createOption() function.
• Get the saved values through the getOption() function. 

If you don't know how to create these containers, head back to previous articles in this series. 

Creating a Radio-Image Type Option Inside an Admin Panel

Example Declaration

First of all I'll create this option type inside an admin panel.

<?php
    /**
     * Create the options
     */
    $aa_panel->createOption( array(

            'id'      => 'aa_rad_image', //Unique ID value which gets saved values
            'type'    => 'radio-image', //Type of the option which you create
            'name'    => 'Radio Image Option', //Name of the option which you create
            'desc'    => 'Choose an option', //Brief description about the option
            'options' => array(              //Two-dimensional array with image URLs

                            'aa_hdr_img' => get_template_directory_uri() . '/images/aa_image1.jpg',
                            'aa_bdy_img' => get_template_directory_uri() . '/images/aa_image2.jpg',
                            'aa_ftr_img' => get_template_directory_uri() . '/images/aa_image3.jpg'

                        ),

            'default' => 'aa_bdy_img' //Default value of the option

        ) );

In line #8, I'm adding a radio-image type option with the createOption() function inside an admin panel $aa_panel. This function takes up an array of parameters, i.e. name, id, desc, type, options and default. The ID (line #10) is aa_rad_image, which should always be unique.

The options parameter at line #14 takes an associative array which defines image URLs and their labels. Each of these key-value pairs creates a radio-image option. So, I added three radio image options with labels: aa_hdr_img aa_bdy_img and aa_ftr_img.

The get_template_directory_uri() function is used to fetch the path of the images for each label.

In the above screenshot, you can view three radio-image options inside an admin panel Neat Options.

Example Usage

Let's get the saved values.

<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it.

// 2. Get the value via ID using getOption function
$aa_rad_image_val = $titan->getOption( 'aa_rad_image' );

/**
 * 
 * Print Admin panel option values
 * 
 */

if ( 'aa_hdr_img' == $aa_rad_image_val ) {

    echo "You've selected Header image.";
    
} elseif ( 'aa_bdy_img' == $aa_rad_image_val ) {

    echo "You've selected Body image.";
    
} else {
    
    echo "You've selected Footer image.";
    
}

?>

The process of retrieving the saved values starts from getting an instance in line #3 via thegetInstance() function. Then I used the getOption() function in line #6 with a parameter, i.e. an ID aa_rad_image, and saved its value to a new variable$aa_rad_image_val.

Up to this point, the label of the selected radio image gets stored in this variable. This means that the user has selected an image from the dashboard and saved the setting. Now there are several ways in which you can display the saved setting values.

Let's take a look at this simple example. I've used if-else check statements in lines #15 to #26:

• If the value of variable $aa_rad_image_val is equal to the label aa_hdr_img then print 'You've selected Header image.'
• If the value of variable $aa_rad_image_val is equal to the label aa_bdy_img then print 'You've selected Body image.'
• If the value of labels is not aa_hdr_img or aa_bdy_img then print 'You've selected Footer image.'

Displaying the Result at the Front-End

Suppose I select the first image.

The front-end appears like this:

The saved setting was for the label aa_hdr_img, so the corresponding statement was printed.

Creating a Radio-Image Type Option Inside an Admin Tab

Example Declaration

Now I'll create this option inside an admin tab.

<?php
    /**
     * 
     * Create the options
     * 
     */
    $aa_tab1->createOption( array(

            'id'      => 'aa_rad_image_in_tab1_panel2', //Unique ID value which gets saved values
            'type'    => 'radio-image', //Type of the option which you create
            'name'    => 'Radio Image Option', //Name of the option which you create
            'desc'    => 'Choose an option', //Brief description about the option
            'options' => array(              //Two-dimensional array with image URLs

                            'aa_hdr_img' => get_template_directory_uri() . '/images/aa_image1.jpg',

                            'aa_bdy_img' => get_template_directory_uri() . '/images/aa_image2.jpg',

                            'aa_ftr_img' => get_template_directory_uri() . '/images/aa_image3.jpg'
                                
                        ),

            'default' => 'aa_bdy_img' //Default value of the option

        ) );

This time I'm adding a radio-image type option in an admin tab $aa_tab1 whose ID isaa_rad_image_in_tab1_panel2. Once again, there are three image options.

You can find this option inside Tab 1 of the Neat Options 2 panel.

Example Usage

Here is the code for getting the values:

<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it.

// 2. Get the value via ID using getOption function
$aa_rad_image_in_tab1_panel2_val = $titan->getOption( 'aa_rad_image_in_tab1_panel2' );

/**
 * 
 * Print Admin tab option values
 * 
 */
 
if ( 'aa_hdr_img' == $aa_rad_image_in_tab1_panel2_val ) {

    echo "You've selected Header image.";
    
} elseif ( 'aa_bdy_img' == $aa_rad_image_in_tab1_panel2_val ) {

    echo "You've selected Body image.";
    
} else {

    echo "You've selected Footer image.";
    
}
 ?>

The code is almost the same, so I'm listing the steps in bullet points:

• Get a unique instance in line #3 via the getInstance() function.
• Retrieve the saved options values in line #6 via the getOption() function.
• Print the saved user settings via if-else check statements in lines #15 to #27.

Displaying the Result at the Front-End

Now I choose the second image. The front-end looks like this:

Creating a Radio-Image Type Option Inside a Metabox

Example Declaration

Now I'll be adding the same radio images in a metabox.

<?php
    /**
     * 
     * Create the options
     * 
     */
    $aa_metbox->createOption( array(

            'id'      => 'aa_mb_rad_image', //Unique ID value which gets saved values
            'type'    => 'radio-image', //Type of the option which you create
            'name'    => 'Radio Image Option', //Name of the option which you create
            'desc'    => 'Choose an option', //Brief description about the option
            'options' => array(              //Two-dimensional array with image URLs

                            'aa_hdr_img' => get_template_directory_uri() . '/images/aa_image1.jpg',

                            'aa_bdy_img' => get_template_directory_uri() . '/images/aa_image2.jpg',

                            'aa_ftr_img' => get_template_directory_uri() . '/images/aa_image3.jpg'

                        ),

            'default' => 'aa_bdy_img' //Default value of the option

        ) );

A radio-image type option exists inside a metabox $aa_metbox with unique IDaa_mb_rad_image.

The image above shows a page editing screen, and right at the end there is a metabox within which this option exists.

Example Usage

Let's retrieve the saved values.

<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it.

// 2. Get the value via ID using getOption function
$aa_mb_rad_image_val = $titan->getOption( 'aa_mb_rad_image', get_the_ID() );

/**
 * 
 * Print Metabox option values
 * 
 */
 
if ( 'aa_hdr_img' == $aa_mb_rad_image_val ) {

    echo "You've selected Header image.";
    
} elseif ( 'aa_bdy_img' == $aa_mb_rad_image_val ) {

    echo "You've selected Body image.";
    
} else {

    echo "You've selected Footer image.";
    
}

 ?>

The only difference in the above code is found in line #6 where I've defined a new parameter inside the getOption() function. This is the get_the_ID() function which retrieves the value of a specific page or post ID.

Displaying the Result at the Front-End

This time, I selected the third image and preview what appears at the front-end.

The desired result is printed as shown in the above image.

Creating a Radio-Image Type Option Inside a Theme Customizer Section

Example Declaration

Finally, let's add this option in a customizer section.

<?php
    /**
     * 
     * Create the options
     * 
     */
    $aa_section1->createOption( array(

            'id'      => 'aa_sec_rad_image', //Unique ID value which gets saved values
            'type'    => 'radio-image', //Type of the option which you create
            'name'    => 'Radio Image Option', //Name of the option which you create
            'desc'    => 'Choose an option', //Brief description about the option
            'options' => array(              //Two-dimensional array with image URLs

                            'aa_hdr_img' => get_template_directory_uri() . '/images/aa_image1.jpg',

                            'aa_bdy_img' => get_template_directory_uri() . '/images/aa_image2.jpg',

                            'aa_ftr_img' => get_template_directory_uri() . '/images/aa_image3.jpg'

                        ),

            'default' => 'aa_bdy_img' //Default value of the option

        ) );

A radio-image option whose ID is aa_sec_rad_image is created inside a theme customizer section $aa_section1.

There is a My Section customizer section, within which exists a Radio Image Option field.

Example Usage

Here is the code:

<?php
// 1. Get the titan framework instance and save it to a variable
$titan = TitanFramework::getInstance( 'neat' ); // we will initialize $titan only once for every file where we use it.

// 2. Get the value via ID using getOption function
$aa_sec_rad_image_val = $titan->getOption( 'aa_sec_rad_image' );

/**
 * 
 * Print Customizer option values
 * 
 */
 
if ( 'aa_hdr_img' == $aa_sec_rad_image_val ) {

    echo "You've selected Header image.";
    
} elseif ( 'aa_bdy_img' == $aa_sec_rad_image_val ) {

    echo "You've selected Body image.";
    
} else {

    echo "You've selected Footer image.";
    
}

?>

This entire code is the same—only the ID and variable names are different.

Displaying the Result at the Front-End

Here's a screenshot of the live changes which took place as I saved my settings:

The radio-image type option can be used to help a user choose different layouts of your theme.

For example, most commercial themes allow the end user to choose between a left sidebar, right sidebar or no sidebar with a full-width page. This can be done with a radio-image type option in a metabox. You can also create several layouts for the output of a plugin, or provide the user with different background patterns to choose from. 

Conclusion

So this is how you can add a set of radio buttons in different containers. These buttons can be used to achieve an extended level of functionality in various places in your themes.

Additionally, this was quite a handy way of introducing some easy styling properties within your WordPress themes. You can add radio palettes to allow users to change the theme's skins. In the next article, we'll explore another option which is related to this radio type.

For example, in a plugin, I gave a user two radio buttons to choose a full-width button or not. I named the option "Make The Buttons Full Width?" with options "Yes" or "No". But I used an associative ID for these options to be 100% or auto, which I used to output the CSS. Check the code below to see if you can understand the trick here:

<?php 

$sec_btn->createOption( array(

    'id'      => 'cfc_btn_width',
    'type'    => 'radio',

    'options' => array(
            '100%' => 'YES',
            'auto' => 'NO'
        ),

    'name'    => 'Make The Buttons Full Width?',
    'css'     => '#aa_btn--primary{ width: value; }'

) );

Cool, eh? 

In the next article, we will explore some more options which are related to this radio type. Let me know if you have any questions via comments, or reach out on Twitter.