How to Create Repeater Elements Using Visual Composer API

How to Create Repeater Elements Using Visual Composer API
1391 Views
3.9
(23)

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;
}
?>

How useful was this blog?

Click on a star to rate it!

Average rating 3.9 / 5. Vote count: 23

No votes so far! Be the first to rate this blog.

2 comments

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

  2. 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.

Leave a comment

Your email address will not be published. Required fields are marked *