I’m trying to create a custom visual composer elements like custom section tag that will contains a div tag that has a class of row and inside the div.row, it contains a custom image box component. Please refer below codes.

<?php class WaAle_custom_elements extends WPBakeryShortCode {
    // Element Init
    function __construct() {
        add_action( 'init', array( $this, 'WaAle_custom_elements_mapping' ) );
        add_shortcode( 'WaAle_sections', array( $this, 'WaAle_sections_html' ) );
        add_shortcode( 'WaAle_row', array( $this, 'WaAle_row_html' ) );
        add_shortcode( 'WaAle_image_box', array( $this, 'WaAle_image_box_html' ) );
    }

    // Element Mapping
    public function WaAle_custom_elements_mapping() {

        // Stop all if VC is not enabled
        if ( !defined( 'WPB_VC_VERSION' ) ) {
            return;
        }

        // Map the block with vc_map()
        //Wa Ale Sections
        vc_map(array(
            'name' => __('WaAle sections', 'text-domain'),
            'base' => 'WaAle_sections',
            'description' => __('WaAle sections', 'text-domain'), 
            'category' => __('WaAle Elements', 'text-domain'),   
            "as_parent" => array('only' => 'WaAle_row'),
            "content_element" => true,
            "show_settings_on_create" => true,
            "is_container" => true,
            "js_view" => 'VcColumnView',
            'icon' => get_template_directory_uri().'/screenshot.png',
            'params' => array(
                array(
                        'type' => 'textfield',
                        'holder' => 'div',
                        'class' => 'title-class',
                        'heading' => __( 'Section ID', 'text-domain' ),
                        'param_name' => 'id',
                        'value' => __( '', 'text-domain' ),
                        'admin_label' => false,
                        'weight' => 0,
                        'group' => 'Custom Group',
                    ),
                array(
                        'type' => 'textfield',
                        'holder' => 'div',
                        'class' => 'title-class',
                        'heading' => __( 'Section Class', 'text-domain' ),
                        'param_name' => 'class',
                        'value' => __( '', 'text-domain ' ),
                        'admin_label' => false,
                        'weight' => 0,
                        'group' => 'Custom Group',
                    ),
            )
        ));

        vc_map(array(
            'name' => __('WaAle row', 'text-domain'),
            'base' => 'WaAle_row',
            'description' => __('WaAle row', 'text-domain'), 
            'category' => __('WaAle Elements', 'text-domain'),
            "as_parent" => array('only' => 'WaAle_box_image'),
            "as_child" => array('only' => 'WaAle_sections'),
            "content_element" => true,
            "show_settings_on_create" => true,
            "is_container" => true,
            "js_view" => 'VcColumnView',
            'icon' => get_template_directory_uri().'/screenshot.png',
            'params' => array(
                array(
                        'type' => 'textfield',
                        'holder' => 'div',
                        'class' => 'title-class',
                        'heading' => __( 'Section ID', 'text-domain' ),
                        'param_name' => 'id',
                        'value' => __( '', 'text-domain' ),
                        'admin_label' => false,
                        'weight' => 0,
                        'group' => 'Custom Group',
                    ),
                array(
                        'type' => 'textfield',
                        'holder' => 'div',
                        'class' => 'title-class',
                        'heading' => __( 'Section Class', 'text-domain' ),
                        'param_name' => 'class',
                        'value' => __( '', 'text-domain ' ),
                        'admin_label' => false,
                        'weight' => 0,
                        'group' => 'Custom Group',
                    ),
            )

        ));

        vc_map(array(
            'name' => __('WaAle Image Box', 'text-domain'),
            'base' => 'WaAle_image_box',
            'description' => __('WaAle Image Box', 'text-domain'), 
            'category' => __('WaAle Elements', 'text-domain'),
            "as_child" => array('only' => 'WaAle_row'),
            "content_element" => true,
            "show_settings_on_create" => true,
            "is_container" => true,
            'icon' => get_template_directory_uri().'/screenshot.png',
            'params' => array(
                array(
                        'type' => 'attach_image',
                        'holder' => 'div',
                        'class' => 'title-class',
                        'heading' => __( 'Box Image Attachment', 'text-domain' ),
                        'param_name' => 'box_image_attachment',
                        'value' => __( '', 'text-domain' ),
                        'admin_label' => false,
                        'weight' => 0,
                        'group' => 'Custom Group',
                    ),
            )

        ));

    }


    //Wa Ale Sections
     //parallax
    public function WaAle_sections_html( $atts, $content = null) {
        // Params extraction
        extract(
            shortcode_atts(
                array(
                    'id'   => '',
                    'class' => '',
                ), 
                $atts
            )
        );

        $id = $id !== '' ? ' id="'.$id.'"' : '';
        $class = $class !== '' ? ' class="'.$class.'"' : '';

        return '<section'.$id.$class.'>'.do_shortcode($content).'</section>';
    }

    public function WaAle_row_html( $atts, $content = null) {
        // Params extraction
        extract(
            shortcode_atts(
                array(
                    'id'   => '',
                    'class' => '',
                ), 
                $atts
            )
        );

        $id = $id !== '' ? ' id="'.$id.'"' : '';
        $class = $class !== '' ? ' class="'.$class.'"' : '';

        return '<section'.$id.$class.'>'.do_shortcode($content).'</section>';
    }




} // End Element Class

 //Your "container" content element should extend WPBakeryShortCodesContainer class to inherit all required functionality
if ( class_exists( 'WPBakeryShortCodesContainer' ) ) {
    class WPBakeryShortCode_WaAle_sections extends WPBakeryShortCodesContainer {
    //
    }
}
if ( class_exists( 'WPBakeryShortCode' ) ) {
    class WPBakeryShortCode_WaAle_row extends WPBakeryShortCode {
    //
    }
}

// Element Class Init
new WaAle_custom_elements(); 

the vc element section together with vc element row, work just fine like if you add a vc element section, inside it, you can add vc element row but in vc element row there’s no add element button where you can select vc element custom image box. Is there a way I could nest vc custom image box element unto vc row element which is a child element of vc section?

Any help, ideas please?

Read more here: Visual composer 3 nested elements


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: