Learn how to create repeater fields for custom element of Visual Composer & WP Bakery. To achieve this, we need to write 2 functions. First one for create new element, Second one for add shortcode.
function will be hooked to these specific action:
- vc_before_init
<?php
add_action( 'vc_before_init', 'cxc_box_repeater_items_funct' );
function cxc_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.
Visual Composer & WP Bakery are based on shortcode. So we have to create shortcode with base value. On above code base value is box_repeater so shortcode will like below. You need to add the following function to functions.php file.
<?php
add_shortcode( 'box_repeater', 'cxc_box_repeater_funct' );
function cxc_box_repeater_funct( $atts ) {
ob_start();
$atts = shortcode_atts(
array(
'box_repeater_heading' => '',
'box_repeater_items' => '',
),
$atts, 'box_repeater'
);
$heading = isset( $atts['box_repeater_heading'] ) ? $atts['box_repeater_heading'] : '';
$cxc_items = isset( $atts['box_repeater_items'] ) ? $atts['box_repeater_items'] : '';
$items = vc_param_group_parse_atts( $cxc_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
if( $item['box_repeater_items_img'] ) {
echo wp_get_attachment_image($item['box_repeater_items_img'], 'full');
}
?>
<div class="info-box">
<h2>
<?php
if( $item['box_repeater_items_title'] ) {
echo $item['box_repeater_items_title'];
}
?>
</h2>
<p>
<?php
if( $item['box_repeater_items_description'] ) {
echo $item['box_repeater_items_description'];
}
?>
</p>
</div>
</div>
<?php } ?>
</div>
<?php } ?>
</div>
<?php
$result = ob_get_clean();
return $result;
}
?>-
CodexCoach is a skilled tech educator known for easy-to-follow tutorials in coding, digital design, and software development. With practical tips and interactive examples, CodexCoach helps people learn new tech skills and advance their careers.
A motivating discussion is definitely worth comment. I do think that you need to
publish more about this issue, it might not be
a taboo matter but generally people don’t speak about such issues.
To the next! Cheers!!
Great write-up, I am normal visitor of one’s web site, maintain up the nice operate, and It is going to be a regular visitor for a lengthy time.