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.
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:
radio
type option.radio
type option is added inside a theme customizer section.All the parameters are of type string
except the options parameter, which is array
by type.
The radio type option can be created inside:
The general format of adding this option is the same:
getInstance()
function.createOption()
function.getOption()
function.However, if you want to learn about how these containers are created with Titan Framework then skim through my previous articles.
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.
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:
$aa_radio_val
equals the label aa_hdr
then print 'You Selected Header'.$aa_radio_val
equals the label aa_bdy
then print 'You Selected Body'.aa_hdr
or aa_bdy
then print 'You Selected Footer'.Suppose I selected Header as a demo value.
Now, this setting should print 'You Selected Header' like this:
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.
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:
getInstance()
function in line #3.getOption()
function and register the ID aa_radio_in_tab1_panel2
.$aa_radio_in_tab1_panel2_val
in line #6.I selected Body. Now this setting should print 'You Selected Body' at the front-end. Here is the screenshot:
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.
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.
This time I chose Footer as the demo value. At the front-end, 'You Selected Footer' should print like this:
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.
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.
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.
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.
radio-palette
type option is added inside a theme customizer section.All the parameters are of type string
, except the options which is array
by type.
You can add this option inside:
During its creation, you will follow a similar format:
getInstance()
function.createOption()
function.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.
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.
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:
var_dump()
functionprint_r()
function I'm using the var_dump()
function to see what gets saved in $aa_rad_palette_val
.
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.
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.
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:
getOption()
function in line #6.var_dump()
function in line #16.This time I choose the first palette, and here are its contents.
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.
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.
Choose the third color palette, for example, and save the results. Here are the array contents:
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.
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.
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.
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:
radio-image
type option is added inside a theme customizer section.The options parameter is array
by type, while the rest are string
.
This option type can be added inside:
Irrespective of the container type, the option is added via the following method:
getInstance()
function.createOption()
function.getOption()
function. If you don't know how to create these containers, head back to previous articles in this series.
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.
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:
$aa_rad_image_val
is equal to the label aa_hdr_img
then print 'You've selected Header image.'$aa_rad_image_val
is equal to the label aa_bdy_img
then print 'You've selected Body image.'aa_hdr_img
or aa_bdy_img
then print 'You've selected Footer image.'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.
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.
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:
getInstance()
function.getOption()
function.if-else
check statements in lines #15 to #27.Now I choose the second image. The front-end looks like this:
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.
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.
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.
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.
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.
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.
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.
New Course: Practical React Fundamentals
/20 WordPress Video Plugins and Players to Add Engagement
/Preview Our New Course on Angular Material
/Build Your Own CAPTCHA and Contact Form in PHP
/Object-Oriented PHP With Classes and Objects
/Best Practices for ARIA Implementation
/Accessible Apps: Barriers to Access and Getting Started With Accessibility
Dramatically Speed Up Your React Front-End App Using Lazy Loading
/15 Best Modern JavaScript Admin Templates for React, Angular, and Vue.js
/15 Best Modern JavaScript Admin Templates for React, Angular and Vue.js
/10 Best WordPress Facebook Widgets
13Hands-on With ARIA: Accessibility for eCommerce
/New eBooks Available for Subscribers
/Hands-on With ARIA: Homepage Elements and Standard Navigation
/20 Best WordPress Calendar Plugins and Widgets
/How Secure Are Your JavaScript Open-Source Dependencies?
/New Course: Secure Your WordPress Site With SSL
/Testing Components in React Using Jest: The Basics
/15 Best PHP Event Calendar and Booking Scripts
/Set Up Routing in PHP Applications Using the Symfony Routing Component
1 /How to Build Complex, Large-Scale Vue.js Apps With Vuex
1 /Creating Stylish and Responsive Progress Bars Using ProgressBar.js
/Set Up an OAuth2 Server Using Passport in Laravel
/Getting Started With Redux: Connecting Redux With React
/Getting Started With Redux: Learn by Example
/Introduction to API Calls With React and Axios
/Introduction to Popmotion: Custom Animation Scrubber
/Introduction to Popmotion: Pointers and Physics
/New Course: Connect to a Database With Laravel’s Eloquent ORM
/How to Make a Real-Time Sports Application Using Node.js
/How to Create a Custom Settings Panel in WooCommerce
/How Laravel Broadcasting Works
/Getting Started With Redux: Why Redux?
/Building the DOM faster: speculative parsing, async, defer and preload
1 /20 Useful PHP Scripts Available on CodeCanyon
3 /Single-Page React Applications With the React-Router and React-Transition-Group Modules
/12 Best Contact Form PHP Scripts
1 /Getting Started With the Mojs Animation Library: The ShapeSwirl and Stagger Modules
/Getting Started With the Mojs Animation Library: The Shape Module
Getting Started With the Mojs Animation Library: The HTML Module
/Project Management Considerations for Your WordPress Project
/Introduction to the CSS Grid Layout With Examples
18 Things That Make Jest the Best React Testing Framework
/Creating an Image Editor Using CamanJS: Layers, Blend Modes, and Events
/New Short Course: Code a Front-End App With GraphQL and React
/Creating an Image Editor Using CamanJS: Applying Basic Filters
/Creating an Image Editor Using CamanJS: Creating Custom Filters and Blend Modes
/Modern Web Scraping With BeautifulSoup and Selenium
/Challenge: Create a To-Do List in React
1 /Deploy PHP Web Applications Using Laravel Forge
/Getting Started With the Mojs Animation Library: The Burst Module
/A Gentle Introduction to Higher-Order Components in React: Best Practices
/Challenge: Build a React Component
/Eloquent Mutators and Accessors in Laravel
1 /A Gentle Introduction to Higher-Order Components in React
/Understanding Recursion With JavaScript
/Creating a Blogging App Using Angular & MongoDB: Delete Post
/Creating a Blogging App Using Angular & MongoDB: Edit Post
/Creating a Blogging App Using Angular & MongoDB: Add Post
/Introduction to Mocking in Python
/Creating a Blogging App Using Angular & MongoDB: Show Post
/Creating a Blogging App Using Angular & MongoDB: Home
/Creating Your First Angular App: Implement Routing
/Persisted WordPress Admin Notices: Part 4
/Creating Your First Angular App: Components, Part 2
/Persisted WordPress Admin Notices: Part 3
/Creating Your First Angular App: Components, Part 1
/Persisted WordPress Admin Notices: Part 2
/Creating Your First Angular App: Basics
/Persisted WordPress Admin Notices: Part 1
/Error and Performance Monitoring for Web & Mobile Apps Using Raygun
/Using Luxon for Date and Time in JavaScript
7 /How to Create an Audio Oscillator With the Web Audio API
/How to Cache Using Redis in Django Applications
/20 Essential WordPress Utilities to Manage Your Site
/Beginner’s Guide to Angular 4: HTTP
/Rapid Web Deployment for Laravel With GitHub, Linode, and RunCloud.io
/Beginners Guide to Angular 4: Routing
/Beginner’s Guide to Angular 4: Services
/Beginner’s Guide to Angular 4: Components
/Creating a Drop-Down Menu for Mobile Pages
/Introduction to Forms in Angular 4: Writing Custom Form Validators
/10 Best WordPress Booking & Reservation Plugins
/How to Download Files in Python
/10 Best HTML5 Sliders for Images and Text
/Site Authentication in Node.js: User Signup
/Creating a Task Manager App Using Ionic: Part 2
/Creating a Task Manager App Using Ionic: Part 1
/Introduction to Forms in Angular 4: Template-Driven Forms
/Get Rid of Bugs Quickly Using BugReplay
/Manipulating HTML5 Canvas Using Konva: Part 1, Getting Started
10 Must-See Easy Digital Downloads Extensions for Your WordPress Site
/Understanding ExpressJS Routing
/Inheritance and Extending Objects With JavaScript
/Performant Animations Using KUTE.js: Part 5, Easing Functions and Attributes
/Performant Animations Using KUTE.js: Part 4, Animating Text
/Performant Animations Using KUTE.js: Part 3, Animating SVG
/Performant Animations Using KUTE.js: Part 2, Animating CSS Properties
Performant Animations Using KUTE.js: Part 1, Getting Started
/Single-Page Applications With ngRoute and ngAnimate in AngularJS
/Working With Tables in React, Part Two
/How to Set Up a Scalable, E-Commerce-Ready WordPress Site Using ClusterCS
/Build Web Applications Using Node.js
/New Course on WordPress Conditional Tags
/TypeScript for Beginners, Part 5: Generics
/TypeScript for Beginners, Part 4: Classes
/Building With Vue.js 2 and Firebase
6Best Unique Bootstrap JavaScript Plugins
/Essential JavaScript Libraries and Frameworks You Should Know About
Vue.js Crash Course: Create a Simple Blog Using Vue.js
/Build a React App With a Laravel Back End: Part 2, React
/Build a React App With a Laravel RESTful Back End: Part 1, Laravel 5.5 API
/Bulk Import a CSV File Into MongoDB Using Mongoose With Node.js
/API Authentication With Node.js
/Command Line Basics and Useful Tricks With the Terminal
/Learn Computer Science With JavaScript: Part 3, Loops
/Learn Computer Science With JavaScript: Part 4, Functions
/Learn Computer Science With JavaScript: Part 2, Conditionals
Learn Computer Science With JavaScript: Part 1, The Basics
/Create Interactive Charts Using Plotly.js, Part 5: Pie and Gauge Charts
Create Interactive Charts Using Plotly.js, Part 4: Bubble and Dot Charts
/Create Interactive Charts Using Plotly.js, Part 3: Bar Charts
/Create Interactive Charts Using Plotly.js, Part 2: Line Charts
/Create Interactive Charts Using Plotly.js, Part 1: Getting Started
/Getting Started With End-to-End Testing in Angular Using Protractor
/Testing Components in Angular Using Jasmine: Part 2, Services
/Testing Components in Angular Using Jasmine: Part 1
/Creating a Blogging App Using React, Part 6: Tags
/React Crash Course for Beginners, Part 3
/React Crash Course for Beginners, Part 2
/React Crash Course for Beginners, Part 1
/Set Up a React Environment, Part 4
1 /Set Up a React Environment, Part 3
/Set Up a React Environment, Part 1
/Creating a Blogging App Using React, Part 5: Profile Page
/Pagination in CodeIgniter: The Complete Guide
/JavaScript-Based Animations Using Anime.js, Part 4: Callbacks, Easings, and SVG
/JavaScript-Based Animations Using Anime.js, Part 3: Values, Timeline, and Playback
/JavaScript-Based Animations Using Anime.js, Part 2: Parameters
JavaScript-Based Animations Using Anime.js, Part 1: Targets and Properties
/20 Popular WordPress User Interface Elements
/10 Elegant CSS Pricing Tables for Your Latest Web Project
/Getting Started With the Flux Architecture in React
/Getting Started With Matter.js: The Composites and Composite Modules
/Getting Started With Matter.js: The Engine and World Modules
/Getting Started With Matter.js: Introduction
/10 More Popular HTML5 Projects for You to Use and Study
/Iterating Fast With Django & Heroku
/Creating a Blogging App Using React, Part 4: Update & Delete Posts
/Creating a jQuery Plugin for Long Shadow Design
/How to Register & Use Laravel Service Providers
2 /Unit Testing in React: Shallow vs. Static Testing
/Creating a Blogging App Using React, Part 3: Add & Display Post
/Creating a Blogging App Using React, Part 2: User Sign-Up
20 /Creating a Blogging App Using React, Part 1: User Sign-In
/Creating a Grocery List Manager Using Angular, Part 2: Managing Items
/Using Celery With Django for Background Task Processing
/Dynamic Page Templates in WordPress, Part 3
/Creating a Grocery List Manager Using Angular, Part 1: Add & Display Items
/New Course: How to Hack Your Own App
/What Is a JavaScript Operator?
/Building Your Startup: Approaching Major Feature Enhancements
How to Define State With Angular UI-Router
/Dynamic Page Templates in WordPress, Part 2
/Dynamic Page Templates in WordPress, Part 1
1Building Your Startup: Securing an API
/How to Draw Bar Charts Using JavaScript and HTML5 Canvas
/Programming With Yii2: Building Community With Voting, Comments, and Sharing
/How to Work With Session Data in CodeIgniter
/12 Best Tab & Accordion WordPress Widgets & Plugins
1 /How to Use the jQuery Function to Select Elements
/How to Create Animations in AngularJS With ngAnimate
/AngularJS Form Validation With ngMessages
/15 Best PHP Calendar, Booking & Events Scripts
/Building Your Startup: Using Routes for Schedule With Me
/A Quick Guide to Dependency Management With Bower
/Getting Started With Chart.js: Scales
/New Short Course: React State Management With MobX
/Building Your Startup: Leveraging Bootstrap, Ajax, and jQuery
/How to Create a Laravel Helper
/Getting Started With Chart.js: Pie, Doughnut, and Bubble Charts
Getting Started With Chart.js: Radar and Polar Area Charts
/Getting Started With Chart.js: Line and Bar Charts
/How to Handle Errors & Exceptions in the Yii Framework
/Getting Started With Chart.js: Introduction
3 /Building Your Startup With PHP: Bootstrap Your Home Page
/How to Build a User Tour With Shepherd in JavaScript
/Building With the Twitter API: Analyzing Your Followers
/Programming With Yii2: Building a RESTful API
/New Course: How to Use the Google Maps API
/Uploading With Rails and Carrierwave
/Making a Sliding Side Navigation Menu for Responsive Designs
/Building With the Twitter API: Creating Friends to Follow
/Building Your Startup: Running Multiple Domains
/Using the Requests Module in Python
5 /Acuity Scheduling Developer Platform: OAuth, Webhooks, and Reporting
/Decoding the Proxy Class in OpenCart
/Acuity Scheduling: Embedding and Developer Integration
1 /Custom Controllers in OpenCart 2
/Building Your Startup: Error Logging
/Acuity Scheduling’s Developer-Friendly Scheduling Service
/New Short Course: Essential Gulp Tasks
/Add a Website Calendar Using Jalendar 2
/Using the New York Times API to Scrape Metadata
1Make Creating Websites Fun Again With Hugo
/Using Illuminate Database With Eloquent in Your PHP App Without Laravel
New Coffee Break Course: How to Use the Angular 2 HTTP Service
/Get Started Building Your Blog With Parse.js: Migration to Your Own Parse Server
/Adding Custom Fields to Simple Products With WooCommerce
/Using Namespaces and Autoloading in WordPress Plugins, Part 4
New Code eBooks Available for Subscribers
/Understanding Forms and Events in React
/Integrate External Libraries in OpenCart Using Composer
1 /How to Build an Angular 2 Service
7 /Programming With Yii2: Using the Debugger
/20 Best CSS Animations on CodeCanyon
/Creating a Custom WordPress Messaging System, Part 4
/Building Your First Web Scraper, Part 3
/
Cathleen Wonderful, what a website it is! This…
Sharyn Ѕimply a smiling ѵisitant heгe to…
shelby What's up it's me, I am also visiting…
Lottie I read this paragraph completely…