latest version

Create Your First VC Shortcode¶

Sample Shortcode¶

Here is a simple shortcode created Unyson way which will be automatically mapped to and available in Visual Composer. This shortcode displays an icon.

Desired shortcode structure¶

Create the following file structure in your theme plugin (see Plugin structure). Please name the shortcode folder using ct- prefix. Here, it’s ct-icon.

plugins/
│--theme-plugin/
  │--extensions/
    │--shortcodes/
        │--shortcodes/
          │--ct-icon/
            ├───config.php      # shortcode config
            ├───options.php     # shortcode options
            └───views
                └───view.php    # shortcode view

Shortcode options: options.php¶

<?php if ( ! defined( 'FW' ) ) {
    die( 'Forbidden' );
}

$options = array(

    'icon' => array(
            'label' => __( 'Icon:', 'ct_theme' ),
            'value' => 'fa-users',  // default value
            'type'  => 'icon',      // unyson option type 'icon' (will translate to VC 'iconpicker' param type)
            'tab'   => __( 'Icon', 'ct_theme' ),
    ),

    'title' => array(
            'label'   => __( 'Icon title:', 'ct_theme' ),
            'type'    => 'text',    // unyson option type 'text' (will trasnalte to VC 'textfield' param type)
            'tab'     => __( 'Icon', 'ct_theme' ),
    ),

    'description' => array(
            'label'   => __( 'Icon description:', 'ct_theme' ),
            'type'    => 'text',    // unyson option type 'text' (will trasnalte to VC 'textfield' param type)
            'tab'     => __( 'Icon', 'ct_theme' ),
    ),

);

Shortcode view: views/view.php¶

<?php if ( ! defined( 'FW' ) ) {
    die( 'Forbidden' );
}

/** @var $atts array The shortcode attributes */

?>

<div class="ct-iconBox ct-iconBox--type1 ct-iconBox--white">
    <div class="ct-iconBox-icon"><i class="<?php echo esc_attr( $atts['icon'] ) ?>"></i></div>
    <h6 class="ct-iconBox-title"><?php echo esc_html( $atts['title'] ) ?></h6>
    <p class="ct-iconBox-description"><?php echo esc_html( $atts['description'] ) ?></p>
</div>

Note

All outputs are and should be escaped. Read more: Escaping

Shortcode configuration: config.php¶

<?php if ( ! defined( 'FW' ) ) {
    die( 'Forbidden' );
}

$cfg = array(
    'page_builder' => array(
            'title'            => __( 'Icon', 'ct_theme' ),
            'description'      => __( 'Displays icon', 'ct_theme' ),
            'tab'              => __( 'Disrupt', 'ct_theme' ),      // usually the theme name
            'icon'             => 'fa fa-caret-square-o-up fa-2x',
    )
);