-
Posts
-
Hi,
I am trying to map a new custom shortcode that I have written to Visual Composer menues using vc_map(). The problem I am facing to is that the shortcode is working fine but when I am trying to register it to Visual Composer it does not apear there! below is my function.php file. Any help would be appreciated!
remove_action( 'admin_menu', 'x_add_customizer_menu' ); function x_my_custom_customizer_menu() { add_menu_page( 'Customizer', 'Customizer', 'install_themes', 'customize.php', NULL, NULL, 61 ); add_submenu_page( 'customize.php', 'Customizer Import', 'Import', 'install_themes', 'import', 'x_customizer_import_option_page' ); add_submenu_page( 'customize.php', 'Customizer Export', 'Export', 'install_themes', 'export', 'x_customizer_export_option_page' ); } add_action( 'admin_menu', 'x_my_custom_customizer_menu' ); // People List // ============================================================================= // // 1. List. // 2. List item. // function x_shortcode_people_list( $atts, $content = null ) { // 1 extract( shortcode_atts( array( 'id' => '', 'class' => '', 'style' => '' ), $atts, 'people_list' ) ); $id = ( $id != '' ) ? 'id="' . esc_attr( $id ) . '"' : ''; $class = ( $class != '' ) ? 'x-ul-icons ' . esc_attr( $class ) : 'x-ul-people'; $style = ( $style != '' ) ? 'style="' . $style . '"' : ''; $output = "<ul {$id} class=\"{$class}\" {$style}>" . do_shortcode( $content ) . "</ul>"; return $output; } add_shortcode( 'people_list', 'x_shortcode_people_list' ); function x_shortcode_people_list_item( $atts, $content = null ) { // 2 extract( shortcode_atts( array( 'id' => '', 'class' => '', 'style' => '', 'src' => '', 'alt' => '', 'link' => '', 'href' => '', 'linkedin' => '', 'target' => '', 'name' => '', 'position' => '', ), $atts, 'people_list_item' ) ); $id = ( $id != '' ) ? 'id="' . esc_attr( $id ) . '"' : ''; $class = ( $class != '' ) ? 'x-li-people ' . esc_attr( $class ) : 'x-li-people'; $style = ( $style != '' ) ? 'style="' . $style . '"' : ''; $src = ( $src != '' ) ? $src : ''; $alt = ( $alt != '' ) ? 'alt="' . $alt . '"' : ''; $link = ( $link == 'true' ) ? 'true' : ''; $href = ( $href != '' ) ? $href : ''; $linkedin = ( $linkedin != '' ) ? $linkedin : ''; $target = ( $target == 'blank' ) ? 'target="_blank"' : ''; $name = ( $name != '' ) ? $name : ''; $position = ( $position != '' ) ? $position : ''; if ( is_numeric( $src ) ) { $src_info = wp_get_attachment_image_src( $src, 'full' ); $src = $src_info[0]; } if ( is_numeric( $href ) ) { $href_info = wp_get_attachment_image_src( $href, 'full' ); $href = $href_info[0]; } if ( $link == 'true' ) { $output = "<li {$id} class=\"{$class}\" {$style}><div class=\"x-people-img x-people-bwWrapper\"><a href=\"{$href}\"><img class=\"x-people-img \" src=\"{$src}\" {$alt}></a></div><div class=\"x-people-desc\"><ul class=\"x-people-social\"><li><a href=\"{$linkedin}\">LinkedIn</a></li></ul><p><strong>{$name}</strong>,<br>{$position}</p><p>" . do_shortcode($content). "</div></li>"; } else { $output = "<li {$id} class=\"{$class}\" {$style}><div class=\"x-people-img x-people-bwWrapper\"><img class=\"x-people-img \" src=\"{$src}\" {$alt}></div><div class=\"x-people-desc\"><ul class=\"x-people-social\"><li><a href=\"{$linkedin}\">LinkedIn</a></li></ul><p><strong>{$name}</strong>,<br>{$position}</p><p>" . do_shortcode($content). "</div></li>"; } return $output; } add_shortcode( 'people_list_item', 'x_shortcode_people_list_item' ); add_action( 'vc_before_init', 'x_visual_composer_map_people_shortcode' ); function x_visual_composer_map_people_shortcode() { vc_map( array( 'base' => 'people_list', 'name' => __( 'People List', '__x__' ), 'weight' => 1500, 'class' => 'x-content-element x-content-element-icon-list', 'icon' => 'group', 'category' => __( 'Typography', '__x__' ), 'description' => __( 'Include a people list in your content', '__x__' ), 'as_parent' => array( 'only' => 'people_list_item' ), 'content_element' => true, 'js_view' => 'VcColumnView', 'params' => array( array( 'param_name' => 'id', 'heading' => __( 'ID', '__x__' ), 'description' => __( '(Optional) Enter a unique ID.', '__x__' ), 'type' => 'textfield', 'holder' => 'div' ), array( 'param_name' => 'class', 'heading' => __( 'Class', '__x__' ), 'description' => __( '(Optional) Enter a unique class name.', '__x__' ), 'type' => 'textfield', 'holder' => 'div' ), array( 'param_name' => 'style', 'heading' => __( 'Style', '__x__' ), 'description' => __( '(Optional) Enter inline CSS.', '__x__' ), 'type' => 'textfield', 'holder' => 'div' ) ) ) ); vc_map( array( 'base' => 'people_list_item', 'name' => __( 'People List Item', '__x__' ), 'weight' => 1500, 'class' => 'x-content-element x-content-element-icon-list-item', 'icon' => 'icon-list-item', 'category' => __( 'Typography', '__x__' ), 'description' => __( 'Include a people list item in your people list', '__x__' ), 'as_child' => array( 'only' => 'people_list' ), 'content_element' => true, 'params' => array( array( 'param_name' => 'name', 'heading' => __( 'Name', '__x__' ), 'description' => __( 'Enter the name.', '__x__' ), 'type' => 'textfield', 'holder' => 'div', 'value' => '' ), array( 'param_name' => 'position', 'heading' => __( 'Position', '__x__' ), 'description' => __( 'Enter the position.', '__x__' ), 'type' => 'textfield', 'holder' => 'div', 'value' => '' ), array( 'param_name' => 'linkedin', 'heading' => __( 'LinkedIn', '__x__' ), 'description' => __( 'Enter the LinkedIn URL.', '__x__' ), 'type' => 'textfield', 'holder' => 'div', 'value' => '' ), array( 'param_name' => 'src', 'heading' => __( 'Image Src', '__x__' ), 'description' => __( 'Enter your image.', '__x__' ), 'type' => 'attach_image', 'holder' => 'div' ), array( 'param_name' => 'alt', 'heading' => __( 'Alt', '__x__' ), 'description' => __( 'Enter in the alt text for your image.', '__x__' ), 'type' => 'textfield', 'holder' => 'div' ), array( 'param_name' => 'link', 'heading' => __( 'Link', '__x__' ), 'description' => __( 'Select to wrap your image in an anchor tag.', '__x__' ), 'type' => 'checkbox', 'holder' => 'div', 'value' => array( '' => 'true' ) ), array( 'param_name' => 'href', 'heading' => __( 'Profile URL', '__x__' ), 'description' => __( 'Enter the profile URL address.', '__x__' ), 'type' => 'textfield', 'holder' => 'div', 'value' => '' ), array( 'param_name' => 'target', 'heading' => __( 'Target', '__x__' ), 'description' => __( 'Select to open your image link in a new window.', '__x__' ), 'type' => 'checkbox', 'holder' => 'div', 'value' => array( '' => 'blank' ) ), array( 'param_name' => 'content', 'heading' => __( 'Text', '__x__' ), 'description' => __( 'Enter your text.', '__x__' ), 'type' => 'textarea_html', 'holder' => 'div', 'value' => '' ), array( 'param_name' => 'id', 'heading' => __( 'ID', '__x__' ), 'description' => __( '(Optional) Enter a unique ID.', '__x__' ), 'type' => 'textfield', 'holder' => 'div' ), array( 'param_name' => 'class', 'heading' => __( 'Class', '__x__' ), 'description' => __( '(Optional) Enter a unique class name.', '__x__' ), 'type' => 'textfield', 'holder' => 'div' ), array( 'param_name' => 'style', 'heading' => __( 'Style', '__x__' ), 'description' => __( '(Optional) Enter inline CSS.', '__x__' ), 'type' => 'textfield', 'holder' => 'div' ) ) ) ); }I think I have sorted it out. I changed this line:
add_action( 'vc_before_init', 'x_visual_composer_map_people_shortcode' );to this:
add_action( 'admin_init', 'x_visual_composer_map_people_shortcode' );But it would be great if someone explain me why the first option was not working!
I have now added two new lines in order to get the people list item as a child to people list shortcode. Bellow is the complete code:
// People List // ============================================================================= // // 1. List. // 2. List item. // function x_shortcode_people_list( $atts, $content = null ) { // 1 extract( shortcode_atts( array( 'id' => '', 'class' => '', 'style' => '' ), $atts, 'people_list' ) ); $id = ( $id != '' ) ? 'id="' . esc_attr( $id ) . '"' : ''; $class = ( $class != '' ) ? 'x-ul-icons ' . esc_attr( $class ) : 'x-ul-people'; $style = ( $style != '' ) ? 'style="' . $style . '"' : ''; $output = "<ul {$id} class=\"{$class}\" {$style}>" . do_shortcode( $content ) . "</ul>"; return $output; } add_shortcode( 'people_list', 'x_shortcode_people_list' ); function x_shortcode_people_list_item( $atts, $content = null ) { // 2 extract( shortcode_atts( array( 'id' => '', 'class' => '', 'style' => '', 'src' => '', 'alt' => '', 'link' => '', 'href' => '', 'linkedin' => '', 'target' => '', 'name' => '', 'position' => '', ), $atts, 'people_list_item' ) ); $id = ( $id != '' ) ? 'id="' . esc_attr( $id ) . '"' : ''; $class = ( $class != '' ) ? 'x-li-people ' . esc_attr( $class ) : 'x-li-people'; $style = ( $style != '' ) ? 'style="' . $style . '"' : ''; $src = ( $src != '' ) ? $src : ''; $alt = ( $alt != '' ) ? 'alt="' . $alt . '"' : ''; $link = ( $link == 'true' ) ? 'true' : ''; $href = ( $href != '' ) ? $href : ''; $linkedin = ( $linkedin != '' ) ? $linkedin : ''; $target = ( $target == 'blank' ) ? 'target="_blank"' : ''; $name = ( $name != '' ) ? $name : ''; $position = ( $position != '' ) ? $position : ''; if ( is_numeric( $src ) ) { $src_info = wp_get_attachment_image_src( $src, 'full' ); $src = $src_info[0]; } if ( is_numeric( $href ) ) { $href_info = wp_get_attachment_image_src( $href, 'full' ); $href = $href_info[0]; } if ( $link == 'true' ) { $output = "<li {$id} class=\"{$class}\" {$style}><div class=\"x-people-img x-people-bwWrapper\"><a href=\"{$href}\"><img class=\"x-people-img \" src=\"{$src}\" {$alt}></a></div><div class=\"x-people-desc\"><ul class=\"x-people-social\"><li><a href=\"{$linkedin}\">LinkedIn</a></li></ul><p><strong>{$name}</strong>,<br>{$position}</p><p>" . do_shortcode($content). "</div></li>"; } else { $output = "<li {$id} class=\"{$class}\" {$style}><div class=\"x-people-img x-people-bwWrapper\"><img class=\"x-people-img \" src=\"{$src}\" {$alt}></div><div class=\"x-people-desc\"><ul class=\"x-people-social\"><li><a href=\"{$linkedin}\">LinkedIn</a></li></ul><p><strong>{$name}</strong>,<br>{$position}</p><p>" . do_shortcode($content). "</div></li>"; } return $output; } add_shortcode( 'people_list_item', 'x_shortcode_people_list_item' ); add_action( 'admin_init', 'x_visual_composer_map_people_shortcode' ); function x_visual_composer_map_people_shortcode() { vc_map( array( 'base' => 'people_list', 'name' => __( 'People List', '__x__' ), 'weight' => 780, 'class' => 'x-content-element x-content-element-icon-list', 'icon' => 'group', 'category' => __( 'Typography', '__x__' ), 'description' => __( 'Include a people list in your content', '__x__' ), 'as_parent' => array( 'only' => 'people_list_item' ), 'content_element' => true, 'js_view' => 'VcColumnView', 'params' => array( array( 'param_name' => 'id', 'heading' => __( 'ID', '__x__' ), 'description' => __( '(Optional) Enter a unique ID.', '__x__' ), 'type' => 'textfield', 'holder' => 'div' ), array( 'param_name' => 'class', 'heading' => __( 'Class', '__x__' ), 'description' => __( '(Optional) Enter a unique class name.', '__x__' ), 'type' => 'textfield', 'holder' => 'div' ), array( 'param_name' => 'style', 'heading' => __( 'Style', '__x__' ), 'description' => __( '(Optional) Enter inline CSS.', '__x__' ), 'type' => 'textfield', 'holder' => 'div' ) ) ) ); vc_map( array( 'base' => 'people_list_item', 'name' => __( 'People List Item', '__x__' ), 'weight' => 780, 'class' => '', 'icon' => '', 'category' => __( 'Typography', '__x__' ), 'description' => __( 'Include a people list item in your people list', '__x__' ), 'as_child' => array( 'only' => 'people_list' ), 'content_element' => true, 'params' => array( array( 'param_name' => 'name', 'heading' => __( 'Name', '__x__' ), 'description' => __( 'Enter the name.', '__x__' ), 'type' => 'textfield', 'holder' => 'div', 'value' => '' ), array( 'param_name' => 'position', 'heading' => __( 'Position', '__x__' ), 'description' => __( 'Enter the position.', '__x__' ), 'type' => 'textfield', 'holder' => 'div', 'value' => '' ), array( 'param_name' => 'linkedin', 'heading' => __( 'LinkedIn', '__x__' ), 'description' => __( 'Enter the LinkedIn URL.', '__x__' ), 'type' => 'textfield', 'holder' => 'div', 'value' => '' ), array( 'param_name' => 'src', 'heading' => __( 'Image Src', '__x__' ), 'description' => __( 'Enter your image.', '__x__' ), 'type' => 'attach_image', 'holder' => 'div' ), array( 'param_name' => 'alt', 'heading' => __( 'Alt', '__x__' ), 'description' => __( 'Enter in the alt text for your image.', '__x__' ), 'type' => 'textfield', 'holder' => 'div' ), array( 'param_name' => 'link', 'heading' => __( 'Link', '__x__' ), 'description' => __( 'Select to wrap your image in an anchor tag.', '__x__' ), 'type' => 'checkbox', 'holder' => 'div', 'value' => array( '' => 'true' ) ), array( 'param_name' => 'href', 'heading' => __( 'Profile URL', '__x__' ), 'description' => __( 'Enter the profile URL address.', '__x__' ), 'type' => 'textfield', 'holder' => 'div', 'value' => '' ), array( 'param_name' => 'target', 'heading' => __( 'Target', '__x__' ), 'description' => __( 'Select to open your image link in a new window.', '__x__' ), 'type' => 'checkbox', 'holder' => 'div', 'value' => array( '' => 'blank' ) ), array( 'param_name' => 'content', 'heading' => __( 'Text', '__x__' ), 'description' => __( 'Enter your text.', '__x__' ), 'type' => 'textarea_html', 'holder' => 'div', 'value' => '' ), array( 'param_name' => 'id', 'heading' => __( 'ID', '__x__' ), 'description' => __( '(Optional) Enter a unique ID.', '__x__' ), 'type' => 'textfield', 'holder' => 'div' ), array( 'param_name' => 'class', 'heading' => __( 'Class', '__x__' ), 'description' => __( '(Optional) Enter a unique class name.', '__x__' ), 'type' => 'textfield', 'holder' => 'div' ), array( 'param_name' => 'style', 'heading' => __( 'Style', '__x__' ), 'description' => __( '(Optional) Enter inline CSS.', '__x__' ), 'type' => 'textfield', 'holder' => 'div' ) ) ) ); } if ( class_exists( 'WPBakeryShortCodesContainer' ) ) { class WPBakeryShortCode_People_List extends WPBakeryShortCodesContainer { } } if ( class_exists( 'WPBakeryShortCode' ) ) { class WPBakeryShortCode_People_List_Item extends WPBakeryShortCode { } }Hi There,
Thanks for writing in!
Glad it worked. We’ll note this also for future reference! 🙂
Thank you so much!
