Nested shortcode on Visual Composer plugin


#1

How can I add my own shortcode ( e.g. Testimonials ) like built-in elements on Visual Composer? For example, the built-in Accordion element has “Add accordion section” link below. I want my added shortcode be like that.

I tried extending The WPBakery_VC_Accordion and WPBakery_VC_Accordion_Tab classes with no luck.


#3

Hi, is there any tutorials for creating this custom element? I need to create custom tabs element, tried extending the built-in tabs, but no luck.
Thanks in advance.


#4

Check out this. It works for me.


#5

Hey everyone :slight_smile:

Here’s some gists of my own blocks:

  1. This example is just really simple, the main shortcode is simple enough to not need any options or globals applied, it simply wraps the innner shortcodes.
  1. This is a much more complex block, both the wrapper and nested shortcodes have options applied to them, furthermore they require globals to collect additional data and render it outside of the $content.

Hope that helps even a bit :slight_smile:


#7
PremiumLayers said

does it also solve the 2 icons appearing in the visual composer shortcodes list

Yeah, my Gists above cover that, only the wrapper element is selectable from the main area, and then only the content element is selectable when you click on the wrapper.

On this Gist: https://gist.github.com/tommusrhodus/698122d1fe22a2489bae

See line 167 (as_parent) and 198 (as_child).

Cheers!


#8

Awesome, thank you very much everyone. :slight_smile:


#10
PremiumLayers said

Thanks so much, really appreciate it!

No problem!


#11

First of all, thanks for sharing the awesome code tom!

I’ve tried the code and it works beautifully in VC editor mode, but I have trouble getting it to display on the real site. Taking a look at the page WYSIWYG editor, I’m only getting:

[machine_skills]

even though I clearly have nested the elements in VC editor. If I manually typed the nested shortcode in the editor it appears just fine in the real site.

Does anyone else have this problem? Any help is greatly appreciated. Thanks!


#12

Yes, the Nested Shortcode part is not working. How to add the Nested Shortcode in the Editor ?