Created
August 12, 2021 03:59
-
-
Save jayeshhpatel/ba6161bd3ed8e9032c99ab94f755e999 to your computer and use it in GitHub Desktop.
Create visual composer with param_group
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Visit : https://increativeweb.com/create-visual-composer-with-param_group | |
============================= | |
Sample 1 | |
//Backend visual composer add-on code | |
vc_map(array( | |
'name' => 'Accordions', | |
'base' => 'maxima_accordion', | |
'category' => 'Maxima', | |
'params' => array( | |
array( | |
'type' => 'textfield', | |
'name' => __('Title', 'rrf-maxima'), | |
'holder' => 'div', | |
'heading' => __('Title', 'rrf-maxima'), | |
'param_name' => 'title', | |
), | |
array( | |
'type' => 'param_group', | |
'param_name' => 'values', | |
'params' => array( | |
array( | |
'type' => 'textfield', | |
'name' => 'label', | |
'heading' => __('Heading', 'rrf-maxima'), | |
'param_name' => 'label', | |
), | |
array( | |
'type' => 'textarea', | |
'name' => 'Content', | |
'heading' => __('Content', 'rrf-maxima'), | |
'param_name' => 'excerpt', | |
) | |
) | |
), | |
), | |
)); | |
//shortcode | |
function maxima_accordion_shortcode($atts){ | |
extract(shortcode_atts(array( | |
'title' => '', | |
'values' => '', | |
), $atts)); | |
$list = '<h4>'.$title.'</h4>'; | |
$values = vc_param_group_parse_atts($atts['values']); | |
$new_accordion_value = array(); | |
foreach($values as $data){ | |
$new_line = $data; | |
$new_line['label'] = isset($new_line['label']) ? $new_line['label'] : ''; | |
$new_line['excerpt'] = isset($new_line['excerpt']) ? $new_line['excerpt'] : ''; | |
$new_accordion_value[] = $new_line; | |
} | |
$idd = 0; | |
foreach($new_accordion_value as $accordion): | |
$idd++; | |
$list .= | |
'<div class="panel panel-default"> | |
<div class="panel-heading"> | |
<h4 class="panel-title"> | |
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse'.$idd.'"> | |
'.$accordion['label'].' | |
<span class="fa fa-plus"></span> | |
</a> | |
</h4> | |
</div> | |
<div id="collapse'.$idd.'" class="panel-collapse collapse"> | |
<div class="panel-body"> | |
<p>'.$accordion['excerpt'].'</p> | |
</div> | |
</div> | |
</div>'; | |
endforeach; | |
return $list; | |
wp_reset_query(); | |
} | |
add_shortcode('maxima_accordion', 'maxima_accordion_shortcode'); | |
================================== | |
Sample 2 | |
<?php | |
add_action('vc_before_init', 'box_repeater_items_funct'); | |
function box_repeater_items_funct() { | |
vc_map( | |
array( | |
"name" => __("Box Repeater", "my-text-domain"), // Element name | |
"base" => "box_repeater", // Element shortcode | |
"class" => "box-repeater", | |
"category" => __('Content', 'my-text-domain'), | |
'params' => array( | |
array( | |
"type" => "textfield", | |
"holder" => "div", | |
"class" => "", | |
"admin_label" => true, | |
"heading" => __("Headig", "my-text-domain"), | |
"param_name" => "box_repeater_heading", | |
"value" => __("", "my-text-domain"), | |
"description" => __('Add heading here', "my-text-domain") | |
), | |
array( | |
'type' => 'param_group', | |
'param_name' => 'box_repeater_items', | |
'params' => array( | |
array( | |
"type" => "attach_image", | |
"holder" => "img", | |
"class" => "", | |
"heading" => __( "Image", "my-text-domain" ), | |
"param_name" => "box_repeater_items_img", | |
"value" => __( "", "my-text-domain" ), | |
), | |
array( | |
"type" => "textarea", | |
"holder" => "div", | |
"class" => "", | |
"admin_label" => true, | |
"heading" => __("Title", "my-text-domain"), | |
"param_name" => "box_repeater_items_title", | |
"value" => __("", "my-text-domain"), | |
), | |
array( | |
"type" => "textarea", | |
"class" => "", | |
"admin_label" => true, | |
"heading" => __("Description", "my-text-domain"), | |
"param_name" => "box_repeater_items_description", | |
"value" => __("", "my-text-domain"), | |
), | |
) | |
), | |
) | |
) | |
); | |
} | |
?> | |
=============== | |
Displaying Fields Values on the Frontend with shortcode. | |
<?php | |
add_shortcode('box_repeater', 'box_repeater_funct'); | |
function box_repeater_funct($atts) { | |
ob_start(); | |
$atts = shortcode_atts(array( | |
'box_repeater_heading'=>'', | |
'box_repeater_items' =>'', | |
), $atts, 'box_repeater'); | |
$heading = $atts['box_repeater_heading']; | |
$items = vc_param_group_parse_atts($atts['box_repeater_items']); | |
?> | |
<div class="box-repeater"> | |
<?php echo (!empty($heading))? '<h2>'.$heading.'<h2>': ''; ?> | |
<?php if($items) { ?> | |
<div class="box-repeater-items"> | |
<?php foreach ($items as $item) { ?> | |
<div class="item-box"> | |
<?php echo wp_get_attachment_image($item['box_repeater_items_img'], 'full'); ?> | |
<div class="info-box"> | |
<h2><?php echo $item['box_repeater_items_title']; ?></h2> | |
<p><?php echo $item['box_repeater_items_description']; ?></p> | |
</div> | |
</div> | |
<?php } ?> | |
</div> | |
<?php } ?> | |
</div> | |
<?php | |
$result = ob_get_clean(); | |
return $result; | |
} | |
?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment