radio-palette(sample)

Display a set of radio boxes for selecting color palettes.

Option Details & Parameters

Type: radio-palette

Returns: array

Can be placed in: Admin Panels , Admin Tabs , Meta Boxes , Theme Customizer

Parameter Type Description
name string The name of the option, for display purposes only.
id string A unique ID for this option. This ID will be used to get the value for this option.
desc string The description to display together with this option.
options array A 2 dimensional array containing sets of hex colors to be used as options.
default string (Optional) The options index of the default palette / color array. Defaults to 0
livepreview string (Optional) jQuery code that updates something in your site in the live preview. Only used when the option is placed in a theme customizer section. Refer to Livepreview for more information on this parameter.
css string (Optional) CSS rules to be used with this option. Only used when the option is placed in an admin page / panel or a theme customizer section. Refer to Generate CSS Automatically for your options for more information on this parameter.

The option parameter should be a 2-dimensional array of hex colors (an array of an array of hex colors). These colors would also be the values returned when getting the saved values.

For example:

'options' => array(
array(
"#69D2E7",
"#A7DBD8",
"#E0E4CC",
"#F38630",
"#FA6900",
),
array(
"#D9CEB2",
"#948C75",
"#D5DED9",
"#7A6A53",
"#99B2B7",
),
)

Returned Values

Performing a getOption on this option would return all the colors of the selected palette. For example:

$colors = $titan->getOption( 'my_palatte_option' );
var_dump($colors);
// Would return an array of hex colors:
array(5) {
[0]=>
string(7) "#a4c3ae"
[1]=>
string(7) "#a9e718"
[2]=>
string(7) "#1abc9c"
[3]=>
string(7) "#e74c3c"
[4]=>
string(7) "#100489"
}

Using the Livepreview Setting / Parameter

The livepreview parameter behaves similarly with the other options, except that the value variable that is given is an array of hex colors. You can check the value by logging the variable in the console:

'livepreview' => 'console.log(value);'

You can use those different values to change the different areas of your theme / plugin with something like this:

'livepreview' =>
"$('body').css('backgroundColor', value[0]);
$('.some-element').css('backgroundColor', value[1]);
$('.another-element').css('backgroundColor', value[2]);
$('.yet-another-element').css('backgroundColor', value[3]);"

Examples

Creating a radio palette option:

$panel->createOption( array(
'name' => 'My Radio Palette Option',
'id' => 'my_palette_option',
'type' => 'radio-palette',
'desc' => 'Choose a style',
'options' => array(
array(
"#69D2E7",
"#A7DBD8",
"#E0E4CC",
"#F38630",
"#FA6900",
),
array(
"#D9CEB2",
"#948C75",
"#D5DED9",
"#7A6A53",
"#99B2B7",
),
array(
"#3FB8AF",
"#7FC7AF",
"#DAD8A7",
"#FF9E9D",
"#FF3D7F",
),
array(
"#D1E751",
"#FFFFFF",
"#000000",
"#4DBCE9",
"#26ADE4",
)
),
'default' => 1,
) );