1

I'd developed a wordpress plugin with addons for WPBakery Page Builder sometime back and over the time I was getting some suggestions from its users so decided to build some of those into my plugin...

You could please check more details regarding the purpose of that plugin at https://wordpress.org/plugins/using-visual-composer-support-for-twitter-bootstrap-themes/

I was trying to add a new element "Container" (https://getbootstrap.com/docs/4.3/layout/overview/#containers) which would almost work like the already existing "Section" element in WPBakery Page Builder but with somewhat less options.

You could please check the code I've written to achieve the above at the following link... https://github.com/gitfaraz/WPBakery-Page-Builder-for-Twitter-Bootstrap-Themes/blob/master/bootstrap4/bs_container.php

Following is the code from that file...

add_action('init', 'bs_container'); 
function bs_container() {
    class WPBakeryShortCode_Bs_Container extends WPBakeryShortCodesContainer{

        // Element Init
        public function __construct(){                  
            add_action('vc_before_init', [$this, 'mapping']);
            add_shortcode('bs_container', [$this, 'output']);
        }

        public function mapping(){
            vc_map(array(
                'name' => esc_html__('Container', 'js_composer'),
                'base' => 'bs_container',
                'class' => 'vc_main-sortable-element',
                'show_settings_on_create' => false,
                'category' => esc_html__('Bootstrap', 'js_composer'),
                'icon' => 'vc_icon-vc-section',
                'description' => esc_html__('Group multiple rows in container', 'js_composer'),
                'is_container' => true,
                'js_view' => 'VcSectionView',
//              'as_parent' => array(
//                  'only' => '',
//              ),
//              'as_child' => array(
//                  'only' => '', // Only root
//              ),
                'params' => array(
                    array(
                        'type' => 'checkbox',
                        'heading' => esc_html__( 'Full height section?', 'js_composer' ),
                        'param_name' => 'full_height',
                        'description' => esc_html__( 'If checked section will be set to full height.', 'js_composer' ),
                        'value' => array( esc_html__( 'Yes', 'js_composer' ) => 'yes' ),
                    ),
                    array(
                        'type' => 'el_id',
                        'heading' => esc_html__( 'Section ID', 'js_composer' ),
                        'param_name' => 'el_id',
                        'description' => sprintf( esc_html__( 'Enter element ID (Note: make sure it is unique and valid according to %sw3c specification%s).', 'js_composer' ), '<a href="https://www.w3schools.com/tags/att_global_id.asp" target="_blank">', '</a>' ),
                    ),
                    array(
                        'type' => 'checkbox',
                        'heading' => esc_html__( 'Disable section', 'js_composer' ),
                        'param_name' => 'disable_element',
                        // Inner param name.
                        'description' => esc_html__( 'If checked the section won\'t be visible on the public side of your website. You can switch it back any time.', 'js_composer' ),
                        'value' => array( esc_html__( 'Yes', 'js_composer' ) => 'yes' ),
                    ),
                    array(
                        'type' => 'textfield',
                        'heading' => esc_html__( 'Extra class name', 'js_composer' ),
                        'param_name' => 'el_class',
                        'description' => esc_html__( 'Style particular content element differently - add a class name and refer to it in custom CSS.', 'js_composer' ),
                    ),
                    array(
                        'type' => 'css_editor',
                        'heading' => esc_html__( 'CSS box', 'js_composer' ),
                        'param_name' => 'css',
                        'group' => esc_html__( 'Design Options', 'js_composer' ),
                    )
                )
            ));
        }

        public function output($atts, $content = NULL ) {
            $output = ('<div class="container">'.do_shortcode( shortcode_unautop( $content ) ).'</div>');           
            return $output;
        }
    }

    new WPBakeryShortCode_Bs_Container();
}

The problem I am having is that its not adding in the backend as I want. When I try to add it to the backend, it adds wrapped within the ROW and COLUMN which I do not want to happen. I want it to add into the backend just like the WPBakery Page Builder's already available SECTION element...

If you could than please download and install the plugin files from https://github.com/gitfaraz/WPBakery-Page-Builder-for-Twitter-Bootstrap-Themes so that you could better understand the issue and so will be able to help me in a better way to achieve what I want.

I know there is someone out there who can help me with this in the best way possible and I will be happy to add his/her/their names to the list of Contributors & Developers section on my Wordpress Plugin page.

I could alter the already existing SECTION element with 'vc_map_update()' (https://kb.wpbakery.com/docs/inner-api/vc_map_update/) but that might be irritating for WPBakery Page Builder users so wanted to add a completely new and standalone CONTAINER element.

Please check the attached snap which I've created to help you better understand the issue...

CyberXoft
  • 11
  • 4
  • All the details are there in my question. Those offsite links are only to support what I've mentioned in my question so that the viewers could better understand the issue, please check. – CyberXoft Nov 13 '19 at 04:42
  • 1
    Please let me know if you found the solution? – Naren Verma Jul 29 '20 at 12:56

0 Answers0