I'm trying to do some custom elements for Visual Composer plugin (WP-Bakery) for wordpress.
I have no problem with simple custom elements, but I'm trying to do some nested elements (a parent containing some child elements). I have no problems creating child elements, and if I create them alome, they are shown on wordpress, but when I try to create parent element, I can see setting elements without problem, but it's no rendered.
I think the problem is the render function (html) on parent class, but I can't get solve it.
PARENT CLASS
<?php
class vcInfoCardContainer extends WPBakeryShortCodesContainer {
// Element Init
function __construct() {
add_action( 'init', array( $this, 'vc_infocardcontainer_mapping' ) );
add_shortcode( 'vc_infocard', array( $this, 'vc_infocardcontainer_html' ) );
}
// Element Mapping
public function vc_infocardcontainer_mapping() {
// Stop all if VC is not enabled
if ( !defined( 'WPB_VC_VERSION' ) ) {
return;
}
// Map the block with vc_map()
vc_map(
array(
'name' => __('VC Info Card Container', 'ex5_vc_elements'),
'base' => 'vc_infocardcontainer',
'description' => __('Info Card Container for VC', 'ex5_vc_elements'),
'category' => __('Ex5 Elements', 'ex5_vc_elements'),
'icon' => get_template_directory_uri().'/assets/img/vc-icon.png',
'as_parent' => array('only' => 'vc_infocard'),
'is_container' => true,
'js_view' => 'VcColumnView',
'params' => array(
array(
'type' => 'textfield',
'heading' => __('Button text','ex5_vc_elements'),
'param_name' => 'button_text',
'description' => __('Default is \'Más info\'', 'ex5_vc_elements'),
'group' => 'Button',
)
),
));
}
//render
public function vc_infocard_html( $atts, $content = null ) {
// Params extraction
extract(
shortcode_atts(
array(
),
$atts
)
);
$html = '<div class="ex5-vc-info-card-container">' . do_shortcode($content) . '</div>';
return $html;
}
}
new vcInfoCardContainer();
CHILD CLASS
<?php
class vcInfoCard extends WPBakeryShortCode {
// Element Init
function __construct() {
add_action( 'init', array( $this, 'vc_infocard_mapping' ) );
add_shortcode( 'vc_infocard', array( $this, 'vc_infocard_html' ) );
}
// Element Mapping
public function vc_infocard_mapping() {
// Stop all if VC is not enabled
if ( !defined( 'WPB_VC_VERSION' ) ) {
return;
}
// Map the block with vc_map()
vc_map(
array(
'name' => __('VC Info Card', 'ex5_vc_elements'),
'base' => 'vc_infocard',
'description' => __('Info Card for VC', 'ex5_vc_elements'),
'category' => __('Ex5 Elements', 'ex5_vc_elements'),
'icon' => get_template_directory_uri().'/assets/img/vc-icon.png',
'as_child' => array('only' => 'vc_infocardcontainer'),
'params' => array(
array(
'type' => 'attach_image',
'heading' => __( 'Main image', 'ex5_vc_elements' ),
'param_name' => 'image',
'group' => 'Images',
),
array(
'type' => 'attach_image',
'heading' => __( 'Icon', 'ex5_vc_elements' ),
'param_name' => 'icon',
'group' => 'Images',
),
array(
'type' => 'colorpicker',
'heading' => __( 'Icon background color', 'ex5_vc_elements' ),
'param_name' => 'icon_background_color',
'value' => __( '#000000', 'ex5_vc_elements' ),
'group' => 'Images',
),
array(
'type' => 'textfield',
'heading' => __('Title','ex5_vc_elements'),
'param_name' => 'Title',
'group' => 'Texts',
),
array(
'type' => 'textfield',
'heading' => __( 'Text', 'ex5_vc_elements' ),
'param_name' => 'text',
'group' => 'Texts',
),
array(
'type' => 'checkbox',
'class' => 'one-third',
'heading' => __( 'Show link button', 'ex5_vc_elements' ),
'param_name' => 'show_button',
'value' => 'show',
'description' => __( 'Indicates if link button is shown)', 'ex5_vc_elements' ),
'group' => 'Button',
),
array(
'type' => 'textfield',
'heading' => __('Button text','ex5_vc_elements'),
'param_name' => 'button_text',
'description' => __('Default is \'Más info\'', 'ex5_vc_elements'),
'group' => 'Button',
),
array(
'type' => 'vc_link',
'heading' => __( 'Button link', 'ex5_vc_elements' ),
'param_name' => 'button_link',
'group' => 'Button',
),
),
));
}
//render
public function vc_infocard_html( $atts ) {
// Params extraction
extract(
shortcode_atts(
array(
'image' => '',
'icon' => '',
'icon_background_color' => '#000000',
'title' => '',
'text' => '',
'show_button' => '',
'button_text' => 'Más info',
'button_link' => '',
),
$atts
)
);
if (empty($button_text)) $button_text = __( 'Más info', 'ex5_vc_elements' );
if ($show_button === 'true') {
if (!empty($button_link)) {
$button = '<div class="ex5-vcic-button">
<a href="'. $button_link .'" target="_self" class="ex5-vcic-link" title="' . $button_text . '">
<span class="ex5-vcic-button-text">' . $button_text . '</span>
</a>
</div>';
} else {
$button = '<div class="ex5-vcic-button">
<span class="ex5-vcic-button-text">' . $button_text . '</span>
</div>';
}
} else {
$button = '';
}
$image = wp_get_attachment_image_src($image);
$icon = wp_get_attachment_image_src($icon);
//vc_build_link(
$html = '
<div class="ex5-vc-infocard">
<div class="ex5-vcic-content">
<div class="ex5-vcic-image">
<span>
<img src="' . $image[0] . '" title="history_inner_14" alt="http://oxigeno.">
</span>
</div>
<div class="ex5-vcic-icon" style="background-color: ' . $icon_background_color . '">
<img src="' . $icon[0] . '" />
</div>
<header class="ex5-vcic-headline">
<h3>' . $title . '</h3>
</header>
<div class="ex5-vcic-text">
<p>' . $text . '</p>
</div>' .
$button
. '</div>
</div>';
return $html;
}
}
new vcInfoCard();
I had solved it. The shortcode call was wrong because it had the wrong function name too.
public function vc_infocard_html( $atts, $content = null ) {
must be
public function vc_infocardcontainer_html( $atts, $content = null ) {