How to Create Repeater Elements Using Visual Composer API

How to Create Repeater Elements Using Visual Composer API
361 Views

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 = $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;
}
?>
Was this article helpful?
YesNo

1 comment

  1. 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!!

Leave a comment

Your email address will not be published.