Visual Composer Shortcodes

templates_vc_example.php

<div class=" <?php echo esc_attr( $css_class ); ?> <?php echo $responsive_css; ?>">
    <span class="headline <?php echo $settings_css; ?>">
        <?php echo do_shortcode($content); ?>
    </span>
</div>
<?php echo $this->endBlockComment('headings'); ?>

vc_example.php

<?php

add_action( 'vc_before_init', 'headings_vc_integration');

function headings_vc_integration() {

   vc_map( array(
      "name" => __( "Headings", "my-text-domain" ),
      "base" => "headings",
      "class" => "",
      "category" => __( "Content", "my-text-domain"),
      "params" => array(
         array(
            "type" => "textarea_html",
            "holder" => "div",
            "class" => "",
            "heading" => __( "Heading", "my-text-domain" ),
            "param_name" => "content",
            "value" => __( "Your heading", "my-text-domain" ),
            "description" => __( "Headline", "my-text-domain" )
        ),
        array(
            "type" => "dropdown",
            "class" => "",
            'admin_label' => true,
            "heading" => __( "Size", "my-text-domain" ),
            "param_name" => "size",
            "value" => array(
                __( 'Regular', 'rmwp' ) => 'regular',
				__( 'Large', 'rmwp' ) => 'large',
				__( 'Super', 'rmwp' ) => 'super'
            ),
            "description" => __( "Select a size", "my-text-domain" )
        ),
        array(
            "type" => "checkbox",
            "class" => "",
            'admin_label' => true,
            "heading" => __( "Responsive Controls", "my-text-domain" ),
            "param_name" => "responsive",
            "value" => array(
                __( 'Hidden (on mobile)<br/>', 'rmwp' ) => '1',
                __( 'Hidden (on tablet)<br/>', 'rmwp' ) => '2',
                __( 'Hidden (on small screen)<br/>', 'rmwp' ) => '3',
                __( 'Hidden (on large screen and up)<br/>', 'rmwp' ) => '4'
            ),
            "description" => __( "Select responsive options", "my-text-domain" )
        ),
        array(
             'type' => 'css_editor',
             'heading' => __( 'Css', 'rmwp' ),
             'param_name' => 'css',
             'group' => __( 'Design options', 'rmwp' ),
         ),
      )
   ));

};

if (class_exists('WPBakeryShortCode') && !class_exists('WPBakeryShortCode_headings')) {

    class WPBakeryShortCode_headings extends WPBakeryShortCode {

        /*
         * Thi methods returns HTML code for frontend representation of your shortcode.
         * You can use your own html markup.
         *
         * @param $atts - shortcode attributes
         * @param @content - shortcode content
         *
         * @access protected
         * vc_filter: VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG vc_shortcodes_css_class - hook to edit element class
         * @return string
         */
        protected function content( $atts, $content = null ) {

            extract( shortcode_atts( array(
                'size' => !empty($size) ? $size : 'regular',
                'title' => !empty($title) ? $title : '',
                'responsive' => '',
                'css' => ''
            ), $atts ) );

            $settings_css = '';
            $css_class = apply_filters( VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, vc_shortcode_custom_css_class( $css, ' ' ), $this->settings['base'], $atts );

            switch($size) {
                case('large'):
                    $settings_css .= ' headline--large';
                    break;
                case('super'):
                    $settings_css .= ' super';
                    break;
                default:
                    break;
            }

            $responsive_css = '';

            if (!empty($responsive)) {
                $responsive_options = explode(',', $responsive);
                foreach ($responsive_options as $key => $value) {
                    switch($value) {
                        case('1'):
                            $responsive_css .= (isset($_GET['vc_editable'])) ? ' opacity-limited-xs' : ' hidden-xs';
                            break;
                        case('2'):
                            $responsive_css .= (isset($_GET['vc_editable'])) ? ' opacity-limited-sm' : ' hidden-sm';
                            break;
                        case('3'):
                            $responsive_css .= (isset($_GET['vc_editable'])) ? ' opacity-limited-md' : ' hidden-md';
                            break;
                        case('4'):
                            $responsive_css .= (isset($_GET['vc_editable'])) ? ' opacity-limited-lg' : ' hidden-lg';
                            break;
                        default:
                            break;
                    }
                }
            }

            ob_start();
            require dirname(dirname(__FILE__)) . '/templates_vc_example.php';
            $view = ob_get_clean();

            return $view;

        }
    }

}

?>