Anyone familiar with WP Bakery and/or Visual Composer?


W

wyclef

Joined
Mar 25, 2021
Messages
27
Reaction score
0
Hey, wondering how to take a WP Bakery PHP accordion module and change the section title so it is a WYSYWIG field and not just textfield. I have located in the PHP how to show the WYSYWIG in the interface but it isn't saving the entered info so there must be somewhere else I need to adjust something?

Based my changes on the vc_map textfield_html param found here https://kb.wpbakery.com/docs/inner-api/vc_map/ for active section and accordion section title. Here is another link that sort of explains something similar https://wordpress.stackexchange.com...bakery-formerly-visual-composer-textfield-par

Updated:
PHP: 
<?php
/**
 * VC Accordion config
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

$panel_id_1 = time() . '-1-' . rand(0, 100);
$panel_id_2 = time() . '-2-' . rand(0, 100);
vc_map(array(
    'name' => esc_html__('Accordion', 'uncode-core') ,
    'base' => 'vc_accordion',
    'weight' => 9250,
    'show_settings_on_create' => false,
    'is_container' => true,
    'icon' => 'fa fa-indent',
    'category' => array(
        esc_html__('Essentials', 'uncode-core') ,
    ),
    'description' => esc_html__('Panels content collapse', 'uncode-core') ,
    'params' => array(
        array(
            'type' => 'textfield',
            'heading' => esc_html__('Title', 'uncode-core') ,
            'param_name' => 'title',
            'description' => esc_html__('Enter text which will be used as module title. Leave blank if no title is needed.', 'uncode-core')
        ) ,
        array(
            'type' => 'textarea_html',
            'heading' => esc_html__('Active section', 'uncode-core') ,
            'param_name' => 'content',
            'description' => esc_html__('Enter section number to be active on load.', 'uncode-core')
        ) ,
        array(
            'type' => 'checkbox',
            'heading' => esc_html__('History (permalinks)', 'uncode-core') ,
            'param_name' => 'history',
            'description' => esc_html__('Activate this to activate url history for tabs.', 'uncode-core') ,
            'value' => array(
                esc_html__("Yes, please", 'uncode-core') => 'yes'
            )
        ) ,
        array(
            'type' => 'dropdown',
            'heading' => esc_html__('Scroll target', 'uncode-core') ,
            'param_name' => 'target',
            'description' => esc_html__('Define the History scroll target on page load.', 'uncode-core') ,
            'dependency' => array(
                'element' => 'history',
                'not_empty' => true,
            ) ,
            'value' => array(
                esc_html__('Scroll to tabs', 'uncode-core') => '',
                esc_html__('Scroll to parent row', 'uncode-core') => "row",
            ) ,
        ) ,
        array(
            'type' => 'checkbox',
            'heading' => esc_html__('Titles inherit typography', 'uncode-core') ,
            'param_name' => 'typography',
            'description' => esc_html__('Set the titles\' typography inherited from the general font family or inherited from the column font family.', 'uncode-core') ,
            'value' => array(
                esc_html__("Yes, please", 'uncode-core') => 'yes'
            )
        ) ,
        array(
            'type' => 'dropdown',
            'heading' => esc_html__('Accordion icon', 'uncode-core') ,
            'param_name' => 'sign',
            'value' => array(
                esc_html__('Chevron', 'uncode-core') => '',
                esc_html__('Plus', 'uncode-core') => "plus",
                // esc_html__('Above', 'uncode-core') => 'above',
            ) ,
            'description' => esc_html__('Set the icon type for the accordion elements.', 'uncode-core'),
        ) ,
        array(
            'type' => 'textfield',
            'heading' => esc_html__('Element ID', 'uncode-core') ,
            'param_name' => 'el_id',
            'description' => esc_html__('This value has to be unique. Change it in case it\'s needed.', 'uncode-core') ,
            "group" => esc_html__("Extra", 'uncode-core') ,
        ) ,
        array(
            'type' => 'textfield',
            'heading' => esc_html__('Extra class name', 'uncode-core') ,
            'param_name' => 'el_class',
            'description' => esc_html__('If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your CSS file.', 'uncode-core'),
            "group" => esc_html__("Extra", 'uncode-core') ,
        )
    ) ,
    'custom_markup' => '
<div class="wpb_accordion_holder wpb_holder clearfix vc_container_for_children">
%content%
</div>
<div class="tab_controls">
    <a class="add_tab" title="' . esc_html__('Add section', 'uncode-core') . '"><span class="vc_icon"></span> <span class="tab-label">' . esc_html__('Add section', 'uncode-core') . '</span></a>
</div>
',
    'default_content' => '
    [vc_accordion_tab title="' . esc_html__('Section 1', 'uncode-core') . '" tab_id="' . $panel_id_1 . '"][/vc_accordion_tab]
    [vc_accordion_tab title="' . esc_html__('Section 2', 'uncode-core') . '" tab_id="' . $panel_id_2 . '"][/vc_accordion_tab]
',
    'js_view' => 'UncodePanelsView'
));
vc_map(array(
    'name' => esc_html__('Section', 'uncode-core') ,
    'base' => 'vc_accordion_tab',
    'weight' => 9250,
    'allowed_container_element' => 'vc_row',
    'is_container' => true,
    'content_element' => false,
    'params' => array(
        array(
            'type' => 'textarea_html',
            'heading' => esc_html__('Title', 'uncode-core') ,
            'param_name' => 'content',
            'description' => esc_html__('Accordion section title.', 'uncode-core')
        ) ,
        array(
            'type' => 'tab_id',
            'heading' => esc_html__('Tab ID', 'uncode-core') ,
            'param_name' => "tab_id",
        ),
        array(
            'type' => 'textfield',
            'heading' => esc_html__('Slug', 'uncode-core') ,
            'param_name' => "slug",
            'description' => esc_html__('Custom value used for permalink. This value has to be unique.', 'uncode-core')
        ),
        array(
            'type' => 'iconpicker',
            'heading' => esc_html__('Icon', 'uncode-core') ,
            'param_name' => 'icon',
            'description' => esc_html__('Specify icon from library.', 'uncode-core') ,
            'value' => '',
            'settings' => array(
                'emptyIcon' => true,
                'iconsPerPage' => 1100,
                'type' => 'uncode'
            ) ,
        ) ,
        array(
            'type' => 'dropdown',
            'heading' => esc_html__('Icon position', 'uncode-core') ,
            'param_name' => 'icon_position',
            'value' => array(
                esc_html__('Left', 'uncode-core') => '',
                esc_html__('Right', 'uncode-core') => "right",
                // esc_html__('Above', 'uncode-core') => 'above',
            ) ,
            'description' => esc_html__('Specify title location.', 'uncode-core'),
            'dependency' => array(
                'element' => 'icon',
                'not_empty' => true,
            ) ,
        ) ,
        array(
            "type" => "type_numeric_slider",
            "heading" => esc_html__("Inner Vertical Spacing", 'uncode-core') ,
            "param_name" => "gutter_size",
            "min" => 0,
            "max" => 4,
            "step" => 1,
            "value" => 2,
            "description" => esc_html__("Set the vertical rhythm between elements.", 'uncode-core') ,
        ) ,
        array(
            "type" => "type_numeric_slider",
            "heading" => esc_html__("Custom Padding", 'uncode-core') ,
            "param_name" => "column_padding",
            "min" => 0,
            "max" => 5,
            "step" => 1,
            "value" => 2,
            "description" => esc_html__("Define a custom top and bottom padding.", 'uncode-core') ,
        ) ,
    ) ,
    'js_view' => 'VcAccordionTabView'
));

Original:
PHP: 
<?php
/**
 * VC Accordion config
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

$panel_id_1 = time() . '-1-' . rand(0, 100);
$panel_id_2 = time() . '-2-' . rand(0, 100);
vc_map(array(
    'name' => esc_html__('Accordion', 'uncode-core') ,
    'base' => 'vc_accordion',
    'weight' => 9250,
    'show_settings_on_create' => false,
    'is_container' => true,
    'icon' => 'fa fa-indent',
    'category' => array(
        esc_html__('Essentials', 'uncode-core') ,
    ),
    'description' => esc_html__('Panels content collapse', 'uncode-core') ,
    'params' => array(
        array(
            'type' => 'textfield',
            'heading' => esc_html__('Title', 'uncode-core') ,
            'param_name' => 'title',
            'description' => esc_html__('Enter text which will be used as module title. Leave blank if no title is needed.', 'uncode-core')
        ) ,
        array(
            'type' => 'textfield',
            'heading' => esc_html__('Active section', 'uncode-core') ,
            'param_name' => 'active_tab',
            'description' => esc_html__('Enter section number to be active on load.', 'uncode-core')
        ) ,
        array(
            'type' => 'checkbox',
            'heading' => esc_html__('History (permalinks)', 'uncode-core') ,
            'param_name' => 'history',
            'description' => esc_html__('Activate this to activate url history for tabs.', 'uncode-core') ,
            'value' => array(
                esc_html__("Yes, please", 'uncode-core') => 'yes'
            )
        ) ,
        array(
            'type' => 'dropdown',
            'heading' => esc_html__('Scroll target', 'uncode-core') ,
            'param_name' => 'target',
            'description' => esc_html__('Define the History scroll target on page load.', 'uncode-core') ,
            'dependency' => array(
                'element' => 'history',
                'not_empty' => true,
            ) ,
            'value' => array(
                esc_html__('Scroll to tabs', 'uncode-core') => '',
                esc_html__('Scroll to parent row', 'uncode-core') => "row",
            ) ,
        ) ,
        array(
            'type' => 'checkbox',
            'heading' => esc_html__('Titles inherit typography', 'uncode-core') ,
            'param_name' => 'typography',
            'description' => esc_html__('Set the titles\' typography inherited from the general font family or inherited from the column font family.', 'uncode-core') ,
            'value' => array(
                esc_html__("Yes, please", 'uncode-core') => 'yes'
            )
        ) ,
        array(
            'type' => 'dropdown',
            'heading' => esc_html__('Accordion icon', 'uncode-core') ,
            'param_name' => 'sign',
            'value' => array(
                esc_html__('Chevron', 'uncode-core') => '',
                esc_html__('Plus', 'uncode-core') => "plus",
                // esc_html__('Above', 'uncode-core') => 'above',
            ) ,
            'description' => esc_html__('Set the icon type for the accordion elements.', 'uncode-core'),
        ) ,
        array(
            'type' => 'textfield',
            'heading' => esc_html__('Element ID', 'uncode-core') ,
            'param_name' => 'el_id',
            'description' => esc_html__('This value has to be unique. Change it in case it\'s needed.', 'uncode-core') ,
            "group" => esc_html__("Extra", 'uncode-core') ,
        ) ,
        array(
            'type' => 'textfield',
            'heading' => esc_html__('Extra class name', 'uncode-core') ,
            'param_name' => 'el_class',
            'description' => esc_html__('If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your CSS file.', 'uncode-core'),
            "group" => esc_html__("Extra", 'uncode-core') ,
        )
    ) ,
    'custom_markup' => '
<div class="wpb_accordion_holder wpb_holder clearfix vc_container_for_children">
%content%
</div>
<div class="tab_controls">
    <a class="add_tab" title="' . esc_html__('Add section', 'uncode-core') . '"><span class="vc_icon"></span> <span class="tab-label">' . esc_html__('Add section', 'uncode-core') . '</span></a>
</div>
',
    'default_content' => '
    [vc_accordion_tab title="' . esc_html__('Section 1', 'uncode-core') . '" tab_id="' . $panel_id_1 . '"][/vc_accordion_tab]
    [vc_accordion_tab title="' . esc_html__('Section 2', 'uncode-core') . '" tab_id="' . $panel_id_2 . '"][/vc_accordion_tab]
',
    'js_view' => 'UncodePanelsView'
));
vc_map(array(
    'name' => esc_html__('Section', 'uncode-core') ,
    'base' => 'vc_accordion_tab',
    'weight' => 9250,
    'allowed_container_element' => 'vc_row',
    'is_container' => true,
    'content_element' => false,
    'params' => array(
        array(
            'type' => 'textfield',
            'heading' => esc_html__('Title', 'uncode-core') ,
            'param_name' => 'title',
            'description' => esc_html__('Accordion section title.', 'uncode-core')
        ) ,
        array(
            'type' => 'tab_id',
            'heading' => esc_html__('Tab ID', 'uncode-core') ,
            'param_name' => "tab_id",
        ),
        array(
            'type' => 'textfield',
            'heading' => esc_html__('Slug', 'uncode-core') ,
            'param_name' => "slug",
            'description' => esc_html__('Custom value used for permalink. This value has to be unique.', 'uncode-core')
        ),
        array(
            'type' => 'iconpicker',
            'heading' => esc_html__('Icon', 'uncode-core') ,
            'param_name' => 'icon',
            'description' => esc_html__('Specify icon from library.', 'uncode-core') ,
            'value' => '',
            'settings' => array(
                'emptyIcon' => true,
                'iconsPerPage' => 1100,
                'type' => 'uncode'
            ) ,
        ) ,
        array(
            'type' => 'dropdown',
            'heading' => esc_html__('Icon position', 'uncode-core') ,
            'param_name' => 'icon_position',
            'value' => array(
                esc_html__('Left', 'uncode-core') => '',
                esc_html__('Right', 'uncode-core') => "right",
                // esc_html__('Above', 'uncode-core') => 'above',
            ) ,
            'description' => esc_html__('Specify title location.', 'uncode-core'),
            'dependency' => array(
                'element' => 'icon',
                'not_empty' => true,
            ) ,
        ) ,
        array(
            "type" => "type_numeric_slider",
            "heading" => esc_html__("Inner Vertical Spacing", 'uncode-core') ,
            "param_name" => "gutter_size",
            "min" => 0,
            "max" => 4,
            "step" => 1,
            "value" => 2,
            "description" => esc_html__("Set the vertical rhythm between elements.", 'uncode-core') ,
        ) ,
        array(
            "type" => "type_numeric_slider",
            "heading" => esc_html__("Custom Padding", 'uncode-core') ,
            "param_name" => "column_padding",
            "min" => 0,
            "max" => 5,
            "step" => 1,
            "value" => 2,
            "description" => esc_html__("Define a custom top and bottom padding.", 'uncode-core') ,
        ) ,
    ) ,
    'js_view' => 'VcAccordionTabView'
));
 
Last edited:
Ad

Advertisements

K

Kuncode

Joined
Jan 30, 2023
Messages
108
Reaction score
8
To change the section title to WYSIWYG instead of textfield, you need to modify the PHP code for the WP Bakery accordion module. In the vc_map function, replace the existing 'textfield' type for the 'title' parameter with the 'vc_wp_editor' type.

Example:

Code: 
array(
    'type' => 'vc_wp_editor',
    'heading' => esc_html__('Title', 'uncode-core') ,
    'param_name' => 'title',
    'description' => esc_html__('Enter text which will be used as module title. Leave blank if no title is needed.', 'uncode-core')
)

This should allow you to save the entered WYSIWYG content for the section title.
 
W

wyclef

Joined
Mar 25, 2021
Messages
27
Reaction score
0
Does this look correct? That seems to have just removed the textfield altogether and not replaced it with anything.

PHP: 
<?php
/**
 * VC Accordion config
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

$panel_id_1 = time() . '-1-' . rand(0, 100);
$panel_id_2 = time() . '-2-' . rand(0, 100);
vc_map(array(
    'name' => esc_html__('Accordion', 'uncode-core') ,
    'base' => 'vc_accordion',
    'weight' => 9250,
    'show_settings_on_create' => false,
    'is_container' => true,
    'icon' => 'fa fa-indent',
    'category' => array(
        esc_html__('Essentials', 'uncode-core') ,
    ),
    'description' => esc_html__('Panels content collapse', 'uncode-core') ,
    'params' => array(
        array(
            'type' => 'textfield',
            'heading' => esc_html__('Title', 'uncode-core') ,
            'param_name' => 'title',
            'description' => esc_html__('Enter text which will be used as module title. Leave blank if no title is needed.', 'uncode-core')
        ) ,
        array(
            'type' => 'textfield',
            'heading' => esc_html__('Active section', 'uncode-core') ,
            'param_name' => 'active_tab',
            'description' => esc_html__('Enter section number to be active on load.', 'uncode-core')
        ) ,
        array(
            'type' => 'checkbox',
            'heading' => esc_html__('History (permalinks)', 'uncode-core') ,
            'param_name' => 'history',
            'description' => esc_html__('Activate this to activate url history for tabs.', 'uncode-core') ,
            'value' => array(
                esc_html__("Yes, please", 'uncode-core') => 'yes'
            )
        ) ,
        array(
            'type' => 'dropdown',
            'heading' => esc_html__('Scroll target', 'uncode-core') ,
            'param_name' => 'target',
            'description' => esc_html__('Define the History scroll target on page load.', 'uncode-core') ,
            'dependency' => array(
                'element' => 'history',
                'not_empty' => true,
            ) ,
            'value' => array(
                esc_html__('Scroll to tabs', 'uncode-core') => '',
                esc_html__('Scroll to parent row', 'uncode-core') => "row",
            ) ,
        ) ,
        array(
            'type' => 'checkbox',
            'heading' => esc_html__('Titles inherit typography', 'uncode-core') ,
            'param_name' => 'typography',
            'description' => esc_html__('Set the titles\' typography inherited from the general font family or inherited from the column font family.', 'uncode-core') ,
            'value' => array(
                esc_html__("Yes, please", 'uncode-core') => 'yes'
            )
        ) ,
        array(
            'type' => 'dropdown',
            'heading' => esc_html__('Accordion icon', 'uncode-core') ,
            'param_name' => 'sign',
            'value' => array(
                esc_html__('Chevron', 'uncode-core') => '',
                esc_html__('Plus', 'uncode-core') => "plus",
                // esc_html__('Above', 'uncode-core') => 'above',
            ) ,
            'description' => esc_html__('Set the icon type for the accordion elements.', 'uncode-core'),
        ) ,
        array(
            'type' => 'textfield',
            'heading' => esc_html__('Element ID', 'uncode-core') ,
            'param_name' => 'el_id',
            'description' => esc_html__('This value has to be unique. Change it in case it\'s needed.', 'uncode-core') ,
            "group" => esc_html__("Extra", 'uncode-core') ,
        ) ,
        array(
            'type' => 'textfield',
            'heading' => esc_html__('Extra class name', 'uncode-core') ,
            'param_name' => 'el_class',
            'description' => esc_html__('If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your CSS file.', 'uncode-core'),
            "group" => esc_html__("Extra", 'uncode-core') ,
        )
    ) ,
    'custom_markup' => '
<div class="wpb_accordion_holder wpb_holder clearfix vc_container_for_children">
%content%
</div>
<div class="tab_controls">
    <a class="add_tab" title="' . esc_html__('Add section', 'uncode-core') . '"><span class="vc_icon"></span> <span class="tab-label">' . esc_html__('Add section', 'uncode-core') . '</span></a>
</div>
',
    'default_content' => '
    [vc_accordion_tab title="' . esc_html__('Section 1', 'uncode-core') . '" tab_id="' . $panel_id_1 . '"][/vc_accordion_tab]
    [vc_accordion_tab title="' . esc_html__('Section 2', 'uncode-core') . '" tab_id="' . $panel_id_2 . '"][/vc_accordion_tab]
',
    'js_view' => 'UncodePanelsView'
));
vc_map(array(
    'name' => esc_html__('Section', 'uncode-core') ,
    'base' => 'vc_accordion_tab',
    'weight' => 9250,
    'allowed_container_element' => 'vc_row',
    'is_container' => true,
    'content_element' => false,
    'params' => array(
        array(
            'type' => 'vc_wp_editor',
            'heading' => esc_html__('Title', 'uncode-core') ,
            'param_name' => 'title',
            'description' => esc_html__('Accordion section title.', 'uncode-core')
        ) ,
        array(
            'type' => 'tab_id',
            'heading' => esc_html__('Tab ID', 'uncode-core') ,
            'param_name' => "tab_id",
        ),
        array(
            'type' => 'textfield',
            'heading' => esc_html__('Slug', 'uncode-core') ,
            'param_name' => "slug",
            'description' => esc_html__('Custom value used for permalink. This value has to be unique.', 'uncode-core')
        ),
        array(
            'type' => 'iconpicker',
            'heading' => esc_html__('Icon', 'uncode-core') ,
            'param_name' => 'icon',
            'description' => esc_html__('Specify icon from library.', 'uncode-core') ,
            'value' => '',
            'settings' => array(
                'emptyIcon' => true,
                'iconsPerPage' => 1100,
                'type' => 'uncode'
            ) ,
        ) ,
        array(
            'type' => 'dropdown',
            'heading' => esc_html__('Icon position', 'uncode-core') ,
            'param_name' => 'icon_position',
            'value' => array(
                esc_html__('Left', 'uncode-core') => '',
                esc_html__('Right', 'uncode-core') => "right",
                // esc_html__('Above', 'uncode-core') => 'above',
            ) ,
            'description' => esc_html__('Specify title location.', 'uncode-core'),
            'dependency' => array(
                'element' => 'icon',
                'not_empty' => true,
            ) ,
        ) ,
        array(
            "type" => "type_numeric_slider",
            "heading" => esc_html__("Inner Vertical Spacing", 'uncode-core') ,
            "param_name" => "gutter_size",
            "min" => 0,
            "max" => 4,
            "step" => 1,
            "value" => 2,
            "description" => esc_html__("Set the vertical rhythm between elements.", 'uncode-core') ,
        ) ,
        array(
            "type" => "type_numeric_slider",
            "heading" => esc_html__("Custom Padding", 'uncode-core') ,
            "param_name" => "column_padding",
            "min" => 0,
            "max" => 5,
            "step" => 1,
            "value" => 2,
            "description" => esc_html__("Define a custom top and bottom padding.", 'uncode-core') ,
        ) ,
    ) ,
    'js_view' => 'VcAccordionTabView'
));
 
W

wyclef

Joined
Mar 25, 2021
Messages
27
Reaction score
0
If I add textarea_html like the original, I do see the wysywig field, it is just that it is not saving the data entered.
 
Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Why is this WordPress comments form not submitting? 1
Working on mobile css menu with plenty of frustration! 1
I need help making a zooming function 11
I Need Help with making a function that draws in a canvas using location data. 1
SMP MPP VLIW for machine code Java, Forth, C, Scheme, etc. 1
Sencha Touch--Support 2 browsers in just 228K! 64
machine code for Java 1
New Dojo Site--Most incompetent ever? 49

Top