Visual composer components

Creation

With Timber it is easy to add custom contents to Visual composer.

You'll have to create three files, the shortcode declaration, the visual composer backend configuration and the template.

The shortcode

This is the native way of handling custom content with wordpress. Timber only help us to split the template from the php.

// shortcode.php

function myComponent( $atts, $content = null ) {
  $context = $atts;
  $context['content'] = $content;
  
  // Parse the twig template with the shortcode's attributes and content.
  $out = Timber::compile('template.twig', $context);
  
  // Return the component HTML 
  return $out;
}

// Add shortcode to wordpress
add_shortcode('myComponent', 'myComponent');

The template

The Twig template to render

<div class="my-component">
  <h1 class="my-component-title">{{ title }}</h1>
  <div class="my-component-content">
    {{ content }}
  </div>
</div>

The Visual composer configuration

This will manage the back-end UI

vc_map( array(
    "name" => "My component",
    "base" => "myComponent",
    'category' => 'Dummy,
    'icon' => 'thb_vc_ico_post',
    'class' => 'thb_vc_sc_post',
    'description' => '',
    "params" => array(
      array(
       "type" => "textarea",
       "heading" => "Content Label",
       "param_name" => "content",
       "description" => "Component's content"
      ),
    )
) );