Advertisement
urosevic

VisualComposer VC_Map with Shortcode Example

Jan 31st, 2016
129
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <?php
  2. /**
  3.  * Plugin Name: VisualComposer Example
  4.  * Plugin URI: https://urosevic.net/wordpress/
  5.  * Description: Example plugin to show how to map custom shortcode to VisualComposer
  6.  * Version: 1.0
  7.  * Author: Aleksandar Urošević
  8.  * Author URI: https://urosevic.net
  9.  * License: GPL3
  10.  */
  11.  
  12. // Do not load this file directly!
  13. if ( ! defined( 'ABSPATH' ) ) {
  14.     die( '-1' );
  15. }
  16.  
  17. // Do not proceed if VC class WPBakeryShortCode does not exists
  18. if ( ! class_exists( 'WPBakeryShortCode' ) ) {
  19.     return;
  20. }
  21.  
  22. // Create shortcode `my_shortcode` for VisualComposer (not available w/o VisualComposer)
  23. if ( ! class_exists( 'WPBakeryShortCode_my_shortcode' ) ) {
  24.  
  25.     class WPBakeryShortCode_my_shortcode extends WPBakeryShortCode {
  26.  
  27.         function content( $atts, $content = null ) {
  28.  
  29.             // Extract shortcode parameters
  30.             extract( shortcode_atts( array(
  31.                 'number'   => 3,
  32.                 'colour'   => 'red',
  33.                 'el_class' => '',
  34.                 'css'      => '',
  35.             ), $atts ) );
  36.  
  37.             // Prepare base element class
  38.             $el_class .= " {$this->settings['base']} {$this->settings['class']}";
  39.  
  40.             // Prepare design class
  41.             $css_class = apply_filters( VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, trim( $el_class ) . vc_shortcode_custom_css_class( $css, ' ' ), $this->settings['base'], $atts );
  42.  
  43.             // Prepare output HTML
  44.             $out = '<div class="' . esc_attr( $css_class ) . '">';
  45.             $out .= sprintf(
  46.                 '<h3>Number is <strong>%1$s</strong>, colour is <strong style="color:%2$s">%2$s</strong>!</h3>',
  47.                 (int) $number,
  48.                 $colour
  49.             );
  50.             $out .= wpb_js_remove_wpautop( $content, true );
  51.             $out .= '</div>' . $this->endBlockComment( $this->settings['base'] );
  52.  
  53.             // Return prepared HTML
  54.             return $out;
  55.  
  56.         } // END function content( $atts, $content = null ) {
  57.  
  58.     } // END class WPBakeryShortCode_my_shortcode extends WPBakeryShortCode {
  59.  
  60. } // END if ( ! class_exists( 'WPBakeryShortCode_my_shortcode' ) ) {
  61.  
  62. // Now map VisualComposer element for custom shortcode my_shortcode
  63. if ( function_exists( 'vc_map' ) ) {
  64.     vc_map( array(
  65.         'name'        => 'My Shortcode',
  66.         'base'        => 'my_shortcode', // Provides $this->settings['base'] for shortcode method
  67.         'class'       => 'custom_shortcode',
  68.         'category'    => __( 'Content', 'js_composer' ),
  69.         'description' => __( 'Description for My Shortcode', 'visualcomposer-example' ),
  70.         'params'      => array(
  71.             // Number field
  72.             array(
  73.                 'type'        => 'textfield',
  74.                 'admin_label' => true,
  75.                 'class'       => 'number',
  76.                 'heading'     => __( 'Number', 'visualcomposer-example' ),
  77.                 'param_name'  => 'number',
  78.                 'std'         => 3,
  79.                 'description' => __( 'Description for number param.', 'visualcomposer-example' ),
  80.             ),
  81.             // Colours dropdown
  82.             array(
  83.                 'type'        => 'dropdown',
  84.                 'admin_label' => true,
  85.                 'class'       => '',
  86.                 'heading'     => __( 'Colour', 'visualcomposer-example' ),
  87.                 'param_name'  => 'colour',
  88.                 'std'         => 'red',
  89.                 'value'       => array(
  90.                     'White'   => 'white',
  91.                     'Yellow'  => 'yellow',
  92.                     'Gold'    => 'gold',
  93.                     'Orange'  => 'orange',
  94.                     'Pink'    => 'pink',
  95.                     'Red'     => 'red',
  96.                     'Magenta' => 'magenta',
  97.                     'Lime'    => 'lime',
  98.                     'Green'   => 'green',
  99.                     'Cyan'    => 'cyan',
  100.                     'Blue'    => 'blue',
  101.                     'Black'   => 'black',
  102.                 ),
  103.                 'description' => __( 'Description for colour param.', 'visualcomposer-example' ),
  104.             ),
  105.             // Shortcode content
  106.             array(
  107.                 'type'        => 'textarea_html',
  108.                 'holder'      => 'div',
  109.                 'class'       => '',
  110.                 'heading'     => __( 'Text', 'js_composer' ),
  111.                 'param_name'  => 'content',
  112.                 'value'       => __( 'Hello world', 'js_composer' ),
  113.                 'description' => __( 'Enter your content.', 'js_composer' ),
  114.             ),
  115.             // Custom class field
  116.             array(
  117.                 'type'        => 'textfield',
  118.                 'heading'     => __( 'Custom Class', 'js_composer' ),
  119.                 'param_name'  => 'el_class',
  120.                 'std'         => '',
  121.                 'description' => __( 'Description for el_class param.', 'visualcomposer-example' ),
  122.             ),
  123.             // Design options tab
  124.             array(
  125.                 'type'       => 'css_editor',
  126.                 'heading'    => __( 'Css', 'js_composer' ),
  127.                 'param_name' => 'css',
  128.                 'group'      => __( 'Design options', 'js_composer' ),
  129.             ),
  130.         ),
  131.     ));
  132. }
Advertisement
RAW Paste Data Copied
Advertisement