Visual Composer custom markup for custom shortcode (vc_map)

Question

Trying to get custom_markup to work with the Visual Composer builder for WordPress.

Found Visual Composer change custom shortcode template and also Visual Composer custom shortcode template - custom_markup display user input but none of them has an answer.

Here's some documentation for the vc_map function https://wpbakery.atlassian.net/wiki/pages/viewpage.action?pageId=524332

Here's my shortcode that I'm using, everything works perfectly, it just looks horrible in the backend ui

vc_map( array(
      "name" => "example",
      "base" => "adwise_vc_example",
      "class" => "",
      "category" => "Plugin name",
      "icon" => "awm_vc_icon",
      "custom_markup" => load_template( ADWISE_VC_DIR . '/vc_templates/adwise_example.php', false),
      "params" => array();

Which currently looks like --> https://dl.dropboxusercontent.com/u/11204765/SS/mac/Screen%20Shot%202016-05-02%20at%2012.52.56.png

In the example below I've tried to set custom_markup to test

which results in https://dl.dropboxusercontent.com/u/11204765/SS/mac/Screen%20Shot%202016-05-02%20at%2012.45.55.png

vc_map( array(
      "name" => "example",
      "base" => "adwise_vc_example",
      "class" => "",
      "category" => "Plugin name",
      "icon" => "awm_vc_icon",
      "custom_markup" => "test",
      "params" => array();

My primary/main problem is that I don't know how to get the values of each attribute for each shortcode to display in the template file.

I've looked almost everywhere for a solution, including browsing through other Visual Composer plugins to see how they've accomplished this.

Any help would be greatly appreciated!

I'm also trying to solve this issue. Unfortunately, looks like all your original linked images here are 404. — Tim Hallman, Jan 27 '20 at 15:10
@TimHallman yeah sorry about that, shortly after Dropbox changed their public folder rules i stopped using Dropbox altogether, i don't belive i have a copy of those images. — Dym, Feb 03 '20 at 10:27
Unfortunately not, seems to require a decent bit of JavaScript that works with WPBakery Page Builders Backbone script and i never got it to work. — Dym, Feb 12 '20 at 13:13

score 0 · Answer 1 · answered May 04 '16 at 17:54

0

What are you trying to accomplish exactly ? From the visual composer core code this is the custom markup for the tabs

'custom_markup' => '
<div class="wpb_tabs_holder wpb_holder vc_container_for_children">
<ul class="tabs_controls">
</ul>
%content%
</div>',

So maybe something like %customattr% will get your desired result?

answered May 04 '16 at 17:54

digitalzoomstudio

1,112
1
15
30

1

Not sure if you've checked the screenshots, one example of what I'm trying to do; if you look at this screenshot --> [screenshot](https://dl.dropboxusercontent.com/u/11204765/SS/mac/Screen%20Shot%202016-05-02%20at%2012.52.56.png) you can see the number "6" on every row right? That's the image ID, but what i want is to display the image it self instead of just the ID, I've seen several plugins doing this, but haven't been able to find their method in their code. I've already tried to use the _%custom%_ in my template and directly in the PHP. - @digitalzoomstudio – Dym May 10 '16 at 12:57
@Dym: did you find a solution? – benedex82 Oct 19 '16 at 13:00

score 0 · Answer 2 · answered Aug 14 '16 at 21:57

just add an array with the shortcode attributes in 'params'

'params' => array(
            array(
                'type' => 'textfield',
                'holder' => 'div',
                'class' => '',
                'heading' => __( 'Title' ),
                'param_name' => 'title',
                'value' => __( 'Titre' ),
                'description' => __( 'Title' ),
            ),
            array(
                'type' => 'textarea',
                'holder' => 'div',
                'class' => '',
                'heading' => __( 'Description' ),
                'param_name' => 'desc',
                'value' => __( 'description' ),
                'description' => __( 'Description' ),
            ),
            array(
                'type' => 'attach_image',
                'holder' => 'img',
                'class' => '',
                'heading' => __( 'Image' ),
                'param_name' => 'img_url',
                'value' => __( '' ),
                'description' => __( 'Image' ),
            ),

        )

and if you want hide a section in the backend just remove the 'holder' line

Sorry for the long wait, didn't get a response for a long time so stopped checking in >.< anyways, there are sections that i want to hide, but also sections that i'd want to customize. - For example, using the Visual Composer image picker will store the selected images in a string, all ID's separated by commas for example -- `[gallery_shortcode image_ids="10,25,30,35,45,46"]` there are however certain shortcodes from other Visual Composer plugins that actually show the selected images in the backend and not just all the ID's. @Hassan — Dym, Aug 24 '16 at 09:22
Here's an example how it looks in other plugins --> https://dl.dropboxusercontent.com/u/11204765/DNT/stackoverflow/vc-ext-example-02.jpg - However, when i do the same it only displays the image ID's - Same thing happens to URL's, example --> https://dl.dropboxusercontent.com/u/11204765/DNT/stackoverflow/vc-ext-example-03.jpg @Hassan — Dym, Aug 24 '16 at 09:23

Visual Composer custom markup for custom shortcode (vc_map)

2 Answers2

Linked