How To Create A Repeater Vc Element

When the user wants to add more than the same structure field in visual composer then we can use param_group to create the custom VC element.

Step 1: Insert WPBakery Page Builder in your WordPress.

Step 2: Create the “vc-elements” folder in your child’s theme.

Step 3: Create a PHP file inside “vc-elements” that will contain the new element. We have created, for example, services.php

Step 4: Add the following code in function.php in your child theme.

/**
* Include VC element.
*/
add_action( 'init', 'vc_shortcode' );
function vc_shortcode() {
  if ( function_exists('is_plugin_active') && is_plugin_active( 'js_composer/js_composer.php' ) ) {
    require get_stylesheet_directory() . '/vc-elements/services.php';
  } 
}

Step 5: Now add the vc_map() function in the services.php file, which allows adding new elements inside the Visual Composer.

$shortcode_fields = array(
  array(
    'type'            => 'textfield',
    'heading'         => esc_html__( 'Section Title', 'elem' ),
    'param_name'      => 'title',
    'value'           => esc_html__( 'Our Services', 'elem' ),
    'description'     => esc_html__( 'Enter Section Title.', 'elem' ),
    'admin_label'     => true,
  ),
  array(
    'type'            => 'textarea',
    'heading'         => esc_html__( 'Section Description', 'elem' ),
    'param_name'      => 'desc',
    'value'           => '',
    'description'     => esc_html__( 'Enter Section Description.', 'elem' ),
    'admin_label'     => true,
  ),
  // params group
  array(
    'type' => 'param_group',
    'value' => '',
    'heading'         => esc_html__( 'Services', 'elem' ),
    'param_name' => 'services',
    'params' => array(
      array(
        'type' => 'textfield',
        'value' => '',
        'heading' => esc_html__( 'Service Number', 'elem' ),
        'param_name' => 'ser_number',
      ),
      array(
        'type' => 'textfield',
        'value' => '',
        'heading' => esc_html__( 'Service Title', 'elem' ),
        'param_name' => 'ser_title',
      ),
      array(
        'type' => 'textarea',
        'value' => '',
        'heading' => esc_html__( 'Service Description', 'elem' ),
        'param_name' => 'ser_desc',
      ),
    )
  ),
);
 
/*
 * Params
 */
$params = array(
  "name"                   	=> esc_html__( "Services", 'elem' ),
  "description"            	=> esc_html__( "Display Services.", 'elem' ),
  "base"                   	=> 'service',
  "class"                  	=> "service_wrapper",
  "controls"               	=> "full",
  "icon"                   	=> "",
  "show_settings_on_create"	=> true,
  "params"                 	=> $shortcode_fields,
);

vc_map( $params );

In above code $shortcode_fields have “title” and “desc” are one fields and “param_group” have “ser_number”, “ser_title” and “ser_desc” are the repeater fields.

Step 6: Create a frontend layout for the element with the below HTML. Put shortcode function in function.php in your child theme.

/*
 * Display Service element
 */
add_shortcode( 'service', 'service_shortcode' );
function service_shortcode( $atts, $content = null, $shortcode_handle = '' ) {
  $default_atts = array(
    'title' => 'Our Services',
    'desc' => '',
    'services' => '',
  );

  $atts = shortcode_atts( $default_atts, $atts );
  extract($atts);
  $services = vc_param_group_parse_atts($atts['services']);
  
  ob_start();
  ?>
  <div class="service-section">
    <div class="container">
      <div class="vc_row">
        <div class="service-left vc_col-sm-12">
          <div class="service-title-desc">
            <h2><?php echo esc_html__( $atts['title'], 'elem' ); ?></h2>
            <p><?php echo esc_html__( $atts['desc'], 'elem' ); ?></p>
          </div>
        </div>
        <div class="service-right vc_col-sm-12">
          <div class="service-wrap">
            <?php 
            foreach($services as $service) {
              ?>
              <div class="service-one vc_col-sm-6">
                <span><?php echo esc_html__( $service['ser_number'], 'elem' ); ?></span>
                <h4><?php echo esc_html__( $service['ser_title'], 'elem' ); ?></h4>
                <p><?php echo esc_html__( $service['ser_desc'], 'elem' ); ?></p>
              </div>
              <?php
            }
            ?>
          </div>
        </div>
      </div>
    </div>
  </div>
  <?php
  return ob_get_clean();
}

Step 7: Follow the below screenshots to add an element in the backend.

Step 8: Check the front end of the page to display the custom element.