The parameter
Group contains multiple parameters. Within a group, you can create, double, sort or remove multiple parameters.
For example: In the
Progress Bar Element , you can see the
Options parameter - It belongs to
Type group.
The group parameter's appearance:
Map Instruction:
array(
'type' => 'group',
'label' => __('Options', 'kingcomposer'),
'name' => 'options',
'description' => '',
'options' => array('add_text' => __('Add new group', 'kingcomposer')),
// default values when create new group
'value' => base64_encode( json_encode( array(
"1" => array(
"param1" => "default value 1 of group 1",
"param2" => "default value 2 of group 1"
),
"2" => array(
"param1" => "default value 3 of group 2",
"param1" => "default value 4 of group 2"
)
))),
// you can use all param type to register child params
'params' => array(
array(
'type' => 'text',
'label' => 'Param 1',
'name' => 'param1',
'description' => 'param1',
'admin_label' => true,
),
array(
'type' => 'text',
'label' => 'Param 2',
'name' => 'param2',
'description' => 'param2',
'admin_label' => true,
)
)
)
Example:
'myelement' => array(
'name' => __('My Element', 'KingComposer'),
'description' => __('', 'KingComposer'),
'icon' => 'kc-icon-progress',
'category' => 'Content',
'css_box' => true,
'params' => array(
array(
'type' => 'text',
'label' => __( 'Title', 'KingComposer' ),
'name' => 'title',
'description' => __( 'This is text title. Leave blank if no title is needed.', 'KingComposer' ),
'admin_label' => true,
),
array(
'type' => 'dropdown',
'label' => __( 'Style', 'KingComposer' ),
'name' => 'style',
'description' => __( 'Select style for progress bars', 'KingComposer' ),
'options' => array(
'1' => __('Style 1', 'KingComposer'),
'2' => __('Style 2', 'KingComposer'),
'3' => __('Style 3', 'KingComposer'),
'4' => __('Style 4', 'KingComposer'),
),
'admin_label' => true,
),
array(
'type' => 'group',
'label' => __('Options', 'KingComposer'),
'name' => 'options',
'description' => __( 'Repeat this fields with each item created, Each item corresponding processbar element.', 'KingComposer' ),
'options' => array('add_text' => __('Add new progress bar', 'kingcomposer')),
'value' => base64_encode( json_encode(array(
"1" => array(
"value" => "90",
"label" => "Development"
),
"2" => array(
"value" => "80",
"label" => "Design"
),
"3" => array(
"value" => "70",
"label" => "Marketing"
)
) ) ),
'params' => array(
array(
'type' => 'text',
'label' => __( 'Value', 'KingComposer' ),
'name' => 'value',
'description' => __( 'Enter value of bar.', 'KingComposer' ),
'admin_label' => true,
),
array(
'type' => 'text',
'label' => __( 'Label', 'KingComposer' ),
'name' => 'label',
'description' => __( 'Enter text used as title of bar.', 'KingComposer' ),
'admin_label' => true,
),
array(
'type' => 'color_picker',
'label' => __( 'Label Color', 'KingComposer' ),
'name' => 'label_color',
'description' => __( 'Label text color', 'KingComposer' ),
),
array(
'type' => 'color_picker',
'label' => __( 'Progressbar Color', 'KingComposer' ),
'name' => 'prob_color',
'description' => __( 'Custom progress bar color.', 'KingComposer' ),
),
array(
'type' => 'color_picker',
'label' => __( 'Progressbar Background Color', 'KingComposer' ),
'name' => 'prob_bg_color',
'description' => __( 'Custom progress Background bar color.', 'KingComposer' ),
),
),
),
array(
'type' => 'checkbox',
'label' => __( 'Processbar Animate', 'KingComposer' ),
'name' => 'progress_animate',
'description' => __( 'Animate effect if checked', 'KingComposer' ),
'options' => array( 'yes' => __( 'Yes, Please!', 'KingComposer' ) ),
'value' => 'yes'
),
array(
'type' => 'text',
'label' => __( 'Processbar Weight', 'KingComposer' ),
'name' => 'weight',
'description' => __( 'Height weight of progress bar: Ex 12, unit (px)', 'KingComposer' ),
'value' => '12'
),
array(
'type' => 'text',
'label' => __( 'Wrapper class name', 'KingComposer' ),
'name' => 'wrap_class',
'description' => __( 'Custom class for wrapper of shortcode widget', 'KingComposer' ),
)
)
)
Output:
//1. In case using template ( your element's name is "myelement" and corresponding template is
// wp-content/themes/twentysixteen/kingcomposer/myelement.php )
$item ){
//loop over each item
echo $item->label;
echo $item->label_color;
// etc..
}
?>
//2. In case creating shortcode via WP function add_shortcode();
$item ){
//loop over each item
echo $item->label;
echo $item->label_color;
// etc..
}
}
?>
Relation in child fields of Group Field:
'relation' => array(){
'parent' => {group-field-name}+'-'+{child-field-name},
'show_when' => {value_of_parent}
//'hide_when' => {value_of_parent}
// Use only one show_when or hide_when
}
Example relation group fields:
'myelement' => array(
'name' => __('My Element', 'KingComposer'),
'params' => array(
array(
'type' => 'group',
'label' => __('Group Field', 'KingComposer'),
'name' => 'gfname',
'description' => '',
'options' => array('add_text' => __('Add new progress bar', 'kingcomposer')),
'value' => base64_encode( json_encode(array(
"1" => array(
"value" => "90",
"label" => "Development"
),
"2" => array(
"value" => "80",
"label" => "Design"
),
"3" => array(
"value" => "70",
"label" => "Marketing"
)
) ) ),
'params' => array(
array(
'type' => 'select',
'label' => __( 'Child Field', 'KingComposer' ),
'name' => 'child',
'options' => array(
'value1' => 'Value One',
'value2' => Value Two
)
),
array(
'type' => 'text',
'label' => __( 'Label', 'KingComposer' ),
'name' => 'label',
'relation' => array(
'parent' => 'gfname-child',
'show_when' => 'value1'
)
),
),
)
)
)
Having trouble with map adding? Please read more about
Add Map.