Example VC Nesting

Visual Composer Nested Elements.php

<?php


/************************************************************************
* Example Nested For VC
* vc_map() stuff should only be included when VC is enabled.
* 
* This is just for a copy/paste test purpose.
*************************************************************************/

// Parent container
vc_map( array(
    'name'                    => __( 'WBC Item' , 'textdomain' ),
    'base'                    => 'wbc_item',
    'icon'                    => 'icon-wpb-row',
    'description'             => __( 'Container for Item', 'textdomain' ),
    'as_parent'               => array('only' => 'wbc_inner_item'), // Use only|except attributes to limit child shortcodes (separate multiple values with comma)
    'content_element'         => true,
    'show_settings_on_create' => true,
    'params'                  => array(

                //BEGIN ADDING PARAMS
                array(
                    'type'        => 'textfield',
                    'heading'     => __( 'Test Heading', 'textdomain' ),
                    'param_name'  => 'heading',
                    'description' => __( 'Heading will be displayed at the top of items', 'textdomain' ),
                ),

                //END ADDING PARAMS

    ),
    "js_view" => 'VcColumnView'
) );

// Nested Element
vc_map( array(
    'name'            => __('WBC Items', 'textdomain'),
    'base'            => 'wbc_inner_item',
    'description'     => __( 'Items "Item".', 'textdomain' ),
    'icon'            => 'icon-wpb-row',
    'content_element' => true,
    'as_child'        => array('only' => 'wbc_item'), // Use only|except attributes to limit parent (separate multiple values with comma)
    'params'          => array(
                
                //BEGIN ADDING PARAMS
                array(
                    'type' => 'textarea_html',
                    'holder' => 'div',
                    'heading' => __( 'Content', 'textdomain' ),
                    'param_name' => 'content',
                    'value' => __( '<p>Some default text here.</p>', 'textdomain' )
                ),

                //END ADDING PARAMS
    ),
) );

// A must for container functionality, replace Wbc_Item with your base name from mapping for parent container
if(class_exists('WPBakeryShortCodesContainer'))
{
    class WPBakeryShortCode_Wbc_Item extends WPBakeryShortCodesContainer {

    }
}

// Replace Wbc_Inner_Item with your base name from mapping for nested element
if(class_exists('WPBakeryShortCode'))
{
    class WPBakeryShortCode_Wbc_Inner_Item extends WPBakeryShortCode {

    }
}

// Shortcodes, just for this example for testing :)
// I keep the shortcodes in their own file so that 
// they don't rely on VC for outputting them, so 
// shortcodes will work when VC not enabled/installed 
// as some users may not want to use VC.
if(!function_exists('wbc_item_output')){
    
    function wbc_item_output( $atts, $content = null){
        $atts =  extract(shortcode_atts( 
            array( 
            'heading'             => '',
        ),$atts )) ;

        $html = '';

        $html .= '<div class="item-container">';

        if(!empty($heading)){
            $html .= '<h4>'.$heading.'</h4>';
        }

        $html .= do_shortcode( $content );

        $html .= '</div>';

        return $html;
    }

    add_shortcode( 'wbc_item' , 'wbc_item_output' );
}

if(!function_exists('wbc_inner_item_output')){
    
    function wbc_inner_item_output($atts, $content = null){
        // $atts =  extract(shortcode_atts( 
        //     array( 
        //     'testing'             => '',
        // ),$atts )) ;

        $html = '';

        $html .= '<div class="inner-item">';

        $html .= do_shortcode( $content );
        
        $html .= '</div>';

        return $html;
    }

    add_shortcode( 'wbc_inner_item' , 'wbc_inner_item_output' );
}
/************************************************************************
* END Example Nested
*************************************************************************/


?>