Visual Composer custom markup for custom shortcode (vc_map) - wordpress

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!

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?

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

Related

How can i use Option Tree custom post type checkbox in wordpress

array(
'id' => 'custom_post_type_checkbox',
'label' => __( 'Custom Post Type Select', 'theme-text-domain' ),
'desc' => sprintf( __( 'Check box' ),
'std' => '',
'type' => 'custom-post-type-checkbox',
'section' => '',
'rows' => '',
'post_type' => 'newyork-offices',
'taxonomy' => '',
'min_max_step'=> '',
'class' => '',
'condition' => '',
'operator' => 'and'
),
This is custom post type check box and i got all posts in my page template. so How can i use it my page template ?
What is the loop function for this ?

Input type number in HelperForm PrestaShop

I am unable to set input type number in HelperForm PrestaShop.
Only text and password types are working. When set to number type, the input box disappears.
$fields_form[0]['form'] = array(
'legend' => array(
'title' => $this->l('Settings'),
),
'input' => array(
array(
'type' => 'number',
'label' => $this->l('Number Input'),
'name' => 'NumberInput',
'required' => true
)
),
'submit' => array(
'title' => $this->l('Save'),
'class' => 'btn btn-default pull-right'
)
);
You can set the type as follows:
$fields_form[0]['form'] = array(
'legend' => array(
'title' => $this->l('Settings'),
),
'input' => array(
array(
'type' => 'html',
'label' => $this->l('Number Input'),
'name' => 'NumberInput',
'required' => true,
'html_content' => '<input type="number" name="NumberInput">'
)
),
'submit' => array(
'title' => $this->l('Save'),
'class' => 'btn btn-default pull-right'
)
);
You can use for examplemin="1" max="5"in the input.
According to the form.tpl in admin theme, this should work.
There is no number type in PrestaShop helper forms, that is the only reason the input box disappears when you put type as number.
What you can do to achieve this is to create a simple input field and add help text or tooltip to indicate that this field only accepts numeric values. Following code can be used to add help text or tooltip to the HelperForm.
array(
'type' => 'text',
'label' => 'Custom Label',
'required' => true,
'hint' => 'Custom Tool Tip',
'desc' => 'Custom Help Text'
)
In the validation part, you can use the put the validation for numbers only and return an error if the value entered is not as expected.

WordPress customizer multiple add_control 's in section

Quick question.
I'm trying to add multiple controls within a WordPress customizer section.
$wp_customize->add_section( 'lr_panel2', array(
'title' => esc_html__( 'Panel 2', 'lr' ),
'active_callback' => 'is_front_page',
'panel' => 'lr_theme_options',
'description' => esc_html__( 'Add a background image to your panel by setting a featured image in the page editor. If you don’t select a page, this panel will not be displayed.', 'lr' ),
) );
$wp_customize->add_setting( 'lr_panel2', array(
'default' => false,
'sanitize_callback' => 'lr_sanitize_numeric_value',
) );
$wp_customize->add_control( 'lr_panel2', array(
'label' => esc_html__( 'Panel Content', 'lr' ),
'section' => 'lr_panel2',
'type' => 'dropdown-pages',
) );
So this one is working fine and dandy. I try to add a second one and neither render. I assumed I could just repeat the add_control class, something like:
$wp_customize->add_control( 'lodestar_panel2', array(
'label' => esc_html__( 'Panel Layout', 'lr' ),
'section' => 'lr',
'type' => 'select',
'choices' => array(
),
) );
But that's not working how I want it too, Has anyone done this before?
Thanks!
You are adding the control in another section. Section should be same
'section' => 'lr_panel2',
This is the section of first control you've added and
'section' => 'lr',
This is the section of second control you've added
Also a control wouldn't show unless you've added somethings in it.

How to make conditional field on cmb2 plugin?

I want to make a condition for my members info page.
$biometabox[] = array(
'id' => 'first-section',
'title' => 'Member Data',
'object_types' => array('dausfmembers'),
'fields' => array(
array(
'name' => 'Gender',
'type' => 'radio',
'id' => $dausf.'gender',
'options' => array(
'Male' => 'Male',
'Female' => 'Female'
)
),
array(
'name' => 'Gender',
'type' => 'radio',
'id' => $dausf.'mstatus',
'options' => array(
'Married' => 'Married',
'Single' => 'Single'
)
),
i want to make if female and married show this fileds in admin panel.
array(
'name' => 'Husband Name',
'type' => 'text',
'id' => $dausf.'hname',
),
can anyone help me out from this ??
"Conditional fields" seem not to be integrated within CMB2 core yet. However, there's a plugin called CMB2 Conditionals which might help you achieve the functionality you want.
After installing and setting up the plugin, it'd be simply achieved by setting up your fields as follows:
A special attention to the 'attributes' key, you can play with it as per the plugin's instructions.
$biometabox[] = array(
'id' => 'first-section',
'title' => 'Member Data',
'object_types' => array('dausfmembers'),
'fields' => array(
array(
'name' => 'Gender',
'type' => 'radio',
'id' => $dausf.'gender',
'options' => array(
'Male' => 'Male',
'Female' => 'Female',
),
'attributes' => array(
'required' => 'required',
)
),
array(
'name' => 'Gender',
'type' => 'radio',
'id' => $dausf.'mstatus',
'options' => array(
'Married' => 'Married',
'Single' => 'Single',
),
'attributes' => array(
'required' => 'required',
)
),
array(
'name' => 'Husband Name',
'type' => 'text',
'id' => $dausf.'hname',
'required' => true,
),
'attributes' => array(
'required' => true, // Will be required only if visible.
'data-conditional-id' => $prefix . 'gender',
'data-conditional-value' => 'Female',
),
'attributes' => array(
'required' => true, // Will be required only if visible.
'data-conditional-id' => $prefix . 'mstatus',
'data-conditional-value' => 'Married',
),
...
) );
You'll want to check the plugin's example functions here: https://github.com/jcchavezs/cmb2-conditionals/blob/master/example-functions.php
I hope you manage to make it you work. Good luck.
Although this might be a bit convoluted you can also write a custom jQuery script to show and hide fields based on the options selected:
In your theme directory add two folders called "js" and "css" if they aren't already there.
Then create a file in /js called "admin_scripts.js". And create a file in /css called "admin.css".
So you'll have:
theme_directory/css/admin.css
theme_directory/js/admin_scripts.js
In your functions.php add the following:
function admin_scripts() {
// Adding custom admin scripts file
wp_enqueue_script( 'admin-js', get_template_directory_uri() . '/js/admin_scripts.js', array( 'jquery' ));
// Registering and adding custom admin css
wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/css/admin.css', false, '1.0.0' );
wp_enqueue_style( 'custom_wp_admin_css' );
}
Then just below this function add:
add_action( 'admin_enqueue_scripts', 'admin_scripts' );
In js/admin_scripts.js add the following (remember to change the ids and classes to your field's ids and classes)
jQuery(document).ready( function() {
if( jQuery('#cmb2_select_field_id').val() == 'conditional_option') {
jQuery('.cmb2-field-to-display-on-select').show();
}
jQuery('#cmb2_select_field_id').bind('change', function (e) {
if( jQuery('#cmb2_select_field_id').val() == 'conditional_option') {
jQuery('.cmb2-field-to-display-on-select').show();
}
else{
jQuery('.cmb2-field-to-display-on-select').hide();
}
});
});
And in css/admin.css add the following:
.cmb2-field-to-display-on-select {
display:none;
}

make CMB text_datetime_timestamp field repeatable

I'm using CMB to creat custom fields for wordpress custom post
https://github.com/WebDevStudios/Custom-Metaboxes-and-Fields-for-WordPress
I'm using text_datetime_timestamp to set date and time and I need to make this field repeatable which is not
as I go through the documentation we can make new fields but I can't figure out how it make "text_datetime_timestamp" field repeatable
any body can show me the way to accomplish that ?
thank you
I did not find a solution to make the field repeatable so I put the field inside group and made it repeatable
array(
'id' => $prefix . 'repeat_date_group',
'type' => 'group',
'description' => '',
'options' => array(
'group_title' => __( 'Date/Time {#}', 'cmb' ),
'add_button' => __( 'Add Another Date/Time', 'cmb' ),
'remove_button' => __( 'Remove Date/Time', 'cmb' ),
'sortable' => true, // beta
),
'fields' => array(
array(
'name' => 'Date/Time',
'desc' => '',
'id' => $prefix . 'course_date',
'type' => 'text_datetime_timestamp'
),
),
),
I hope this answer will help somebody
Well here is my code, you may try this
$cmb= new_cmb2_box( array(
'id' => $prefix.'testing',
'title' => _('Testing'),
'object_types' => array('post'),
'context' => 'normal',
'priority' => 'high',
'show_names' => true,
));
$cmb->add_field( array(
'name' => 'Test Date/Time Picker Combo (UNIX timestamp)',
'id' => 'wiki_test_datetime_timestamp',
'type' => 'text_datetime_timestamp',
'repeatable' => true,
) );

Resources