How to show new custom meta box in visual composer in front end

Question

i have create a custom meta box for visual composer and its working fine i admin section

add_action( 'vc_before_init', 'custome_team_section_createWithVC' );


function custome_team_section_createWithVC() {
   vc_map( array(
      "name" => esc_html__( "Custome Team Box", "custome" ),
      "base" => "team_box",
      "category" => "Custome",
      "params" => array( 

        array(
            'type' => 'attach_image',
            'heading' => esc_html__( 'Member Image', 'custome' ),
            'param_name' => 'image_url',
            'description' => esc_html__( 'Add Member Image', 'custome' ),
        ),  

        array(
            "type" => "textfield",
            "heading" => esc_html__("Name", "custome"),
            "param_name" => "name",
            "description" => esc_html__("Add member name.", "custome"),
        "adm    in_label" => true,
        ),    

        array(
            "type" => "textfield",
            "heading" => esc_html__("Job", "custome"),
            "param_name" => "position",
            "description" => esc_html__("Add member position.", "custome"),
        ),

        array(
            "type" => "textarea",
            "heading" => esc_html__("About Member", "custome"),
            "param_name" => "contentm",
            "description" => esc_html__("Add content about the member.", "custome"),
        ),

        array(
            'type' => 'param_group',
            'heading' => esc_html__( 'Social', 'custome' ),
            'param_name' => 'social',
            'value' => urlencode( json_encode( array(
                array(
                    'title' => esc_html__( 'facebook', 'custome' )
                ),
            ) ) ),
            'group' => 'Social',
            'params' => array(
                array(
                    'type' => 'vc_link',
                    'heading' => esc_html__( 'URL (Link)', 'custome' ),
                    'param_name' => 'link',
                    'description' => esc_html__( 'Add a url for social box.', 'custome' ),
                ),  

                array(
                    'type' => 'iconpicker',
                    'heading' => esc_html__( 'Icon', 'custome' ),
                    'param_name' => 'icon_fontawesome',
                    'value' => 'fa fa-info-circle',
                    'settings' => array(
                        'emptyIcon' => false, // default true, display an "EMPTY" icon?
                        'iconsPerPage' => 200, // default 100, how many icons per/page to display
                    ),
                    'description' => esc_html__( 'Select icon from library.', 'custome' ),
                    'admin_label' => true,
                ),

            )
        ),

      ),
   ) );
}

but i dont know how it will show the content in front end i am using the default wordpress theme twenty seventeen and when i check front end after create the page with this meta box its showing the default short codes as showwn in image

what code i have to use in either functions.php or page.php so that it show the custom meta box in front end correctly

Thanks

Answer 1

Please do not call this a 'custom meta box', that's something else, read here.

You are adding your custom shortcode to the WPBakery Page Builder (formerly Visual Composer) with vc_map(), but you forget to register the shortcode. That's why you're seeing the shortcode on the frontend. The Page Builder is basicly a giant shortcode generator.

The base in the vc_map() function, is used for the shortcode name.

In your case it's team_box.

Add the shortcode like this:

add_shortcode( 'team_box', 'team_box_callback' );
function team_box_callback( $atts ) {
  extract( shortcode_atts( array(
    'image_url' => 'image_url',
    'name' => 'name',
    // add your other field param_name here
  ), $atts ) );

  $your_html_shortcode_output = 'u can now use the shortcode attributes like normal params, like this: ' . $name;

  return $your_html_shortcode_output;
}

You can find more information about vc_map() here.

Regards, Bjorn