3, 'colour' => 'red', 'el_class' => '', 'css' => '', ), $atts ) ); // Prepare base element class $el_class .= " {$this->settings['base']} {$this->settings['class']}"; // Prepare design class $css_class = apply_filters( VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, trim( $el_class ) . vc_shortcode_custom_css_class( $css, ' ' ), $this->settings['base'], $atts ); // Prepare output HTML $out = '

'; $out .= sprintf( '

Number is %1$s, colour is %2$s!

', (int) $number, $colour ); $out .= wpb_js_remove_wpautop( $content, true ); $out .= '

' . $this->endBlockComment( $this->settings['base'] ); // Return prepared HTML return $out; } // END function content( $atts, $content = null ) { } // END class WPBakeryShortCode_my_shortcode extends WPBakeryShortCode { } // END if ( ! class_exists( 'WPBakeryShortCode_my_shortcode' ) ) { // Now map VisualComposer element for custom shortcode my_shortcode if ( function_exists( 'vc_map' ) ) { vc_map( array( 'name' => 'My Shortcode', 'base' => 'my_shortcode', // Provides $this->settings['base'] for shortcode method 'class' => 'custom_shortcode', 'category' => __( 'Content', 'js_composer' ), 'description' => __( 'Description for My Shortcode', 'visualcomposer-example' ), 'params' => array( // Number field array( 'type' => 'textfield', 'admin_label' => true, 'class' => 'number', 'heading' => __( 'Number', 'visualcomposer-example' ), 'param_name' => 'number', 'std' => 3, 'description' => __( 'Description for number param.', 'visualcomposer-example' ), ), // Colours dropdown array( 'type' => 'dropdown', 'admin_label' => true, 'class' => '', 'heading' => __( 'Colour', 'visualcomposer-example' ), 'param_name' => 'colour', 'std' => 'red', 'value' => array( 'White' => 'white', 'Yellow' => 'yellow', 'Gold' => 'gold', 'Orange' => 'orange', 'Pink' => 'pink', 'Red' => 'red', 'Magenta' => 'magenta', 'Lime' => 'lime', 'Green' => 'green', 'Cyan' => 'cyan', 'Blue' => 'blue', 'Black' => 'black', ), 'description' => __( 'Description for colour param.', 'visualcomposer-example' ), ), // Shortcode content array( 'type' => 'textarea_html', 'holder' => 'div', 'class' => '', 'heading' => __( 'Text', 'js_composer' ), 'param_name' => 'content', 'value' => __( 'Hello world', 'js_composer' ), 'description' => __( 'Enter your content.', 'js_composer' ), ), // Custom class field array( 'type' => 'textfield', 'heading' => __( 'Custom Class', 'js_composer' ), 'param_name' => 'el_class', 'std' => '', 'description' => __( 'Description for el_class param.', 'visualcomposer-example' ), ), // Design options tab array( 'type' => 'css_editor', 'heading' => __( 'Css', 'js_composer' ), 'param_name' => 'css', 'group' => __( 'Design options', 'js_composer' ), ), ), )); }