Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save azizultex/99d3c44fee6b15bd85ac to your computer and use it in GitHub Desktop.
Save azizultex/99d3c44fee6b15bd85ac to your computer and use it in GitHub Desktop.
Mapping Nested Shortcodes in Visual Composer
// Shortcode
// source : https://wpbakery.atlassian.net/wiki/pages/viewpage.action?pageId=524362
if(!function_exists('carousel_content')){
function carousel_content( $atts, $content = null ) {
return '<div class="owl-carousel content-carousel content-slider">'.do_shortcode($content).'</div>';
}
add_shortcode('carousel_content', 'carousel_content');
}
if(!function_exists('single_carousel_content')) {
function single_carousel_content( $atts, $content = null) {
extract(shortcode_atts(array(
'title' => 'Flexible & Customizable',
'description' => '',
'url' => '',
'img' => ''
), $atts));
$url = ($url=='||') ? '' : $url;
$url = ps_build_link( $url );
$a_link = $url['url'];
$a_title = ($url['title'] == '') ? '' : 'title="'.$url['title'].'"';
$a_target = ($url['target'] == '') ? '' : 'target="'.$url['target'].'"';
$button = $a_link ? '<a class="btn btn-md btn-black" href="'.$a_link. '" '.$a_title.' '.$a_target.'>'.$url['title'].'</a>' : '';
$image = wp_get_attachment_image_src( $img, 'full');
$image_src = $image['0'];
$output = '<div class="item">
<div class="container">
<div class="row">
<div class="col-md-6 mb-sm-30">
<img src="'.$image_src.'" alt="" />
</div>
<div class="col-md-5 col-md-offset-1">
<h3>'.$title.'</h3>
<div class="spacer-15"></div>
'.$description.'
<div class="spacer-15"></div>
'.$button.'
</div>
</div>
</div>
</div>';
return $output;
}
add_shortcode('single_carousel_content', 'single_carousel_content');
}
// Mapping
vc_map( array(
"name" => __("Carousel Content", "mozel"),
"base" => "carousel_content",
"as_parent" => array('only' => 'single_carousel_content'),
"content_element" => true,
"show_settings_on_create" => false,
"is_container" => true,
"js_view" => 'VcColumnView',
"category" =>array('Mozel', 'Content')
) );
vc_map( array(
"name" => __("Single Carousel Content", "mozel"),
"base" => "single_carousel_content",
"content_element" => true,
"as_child" => array('only' => 'carousel_content'),
"show_settings_on_create" => true,
"params" => array(
array(
"type" => "textfield",
"heading" => __("Title", "mozel"),
"param_name" => "title"
),
array(
"type" => "textarea",
"heading" => __("Description", "mozel"),
"param_name" => "description"
),
array(
'type' => 'vc_link',
'heading' => __( 'Button', 'mozel' ),
'param_name' => 'url',
),
array(
'type' => 'attach_image',
'heading' => __( 'Add Image', 'mozel' ),
'param_name' => 'img',
)
),
) );
if ( class_exists( 'WPBakeryShortCodesContainer' ) ) {
class WPBakeryShortCode_Carousel_Content extends WPBakeryShortCodesContainer {
}
}
if ( class_exists( 'WPBakeryShortCode' ) ) {
class WPBakeryShortCode_Single_Carousel_Content extends WPBakeryShortCode {
}
}
@arelidev
Copy link

Thank you!

@manzurahammed
Copy link

manzurahammed commented Dec 6, 2017

Thank you

Copy link

ghost commented Mar 19, 2018

How to add parent for all VC shortcodes (custom & default)?

@cuneytrizacelik
Copy link

Hi. How do I make use of tabs inside vc accordion.

@pixelmultiplo
Copy link

"super easy"

@kubiqsk
Copy link

kubiqsk commented Jul 11, 2023

I was looking for a solution of nested containers for WPBakery, like <div>s and I found this (which is not what I was looking for, because obviously you can not nest same element into itself in WPB and that's crazy limiting),
but still I have a question: why would you do this?
Why not just create one custom element that will include that wrapper inside and items in repeater (or how it's called)?
Does this solution have any pros comparing to what I wrote?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment