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

Issue

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

Solution

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

Answered By - Bjorn

Answer Checked By - David Goodson (PHPFixing Volunteer)

Read More

[FIXED] how to youtube api data to print in toolset metabox using a button click before save-post

Issue

i create a metabox with 'import' button in post.php. Also, ready for youtube api data code. but i need, 'when i click 'import' button to run youtube api data function and the values are print in toolset custom fields metabox before i publish or draft the post. after, i check the data is correct then will publish the post in wordpress php.

function add_your_meta_box()
    {
    
    add_meta_box('import-data', 'YT Import', 'function_of_metabox', 'movie', 'side', 'high');
    }
    
    add_action('add_meta_boxes', 'add_your_meta_box'); 
    
    function function_of_metabox()
    {?>
        <input type="submit" class="button button-primary button-large" value="Import" id="Import"/>
    <?php }

button meta box

    function my_add_custom_fields1(){
$post_id = get_the_ID();   
$meta2 = get_post_status($post_id);
$meta3 =   get_post_type( $post_id );
$meta1 = get_post_meta(get_the_ID(), 'wpcf-song-duration', true);  
$ytURL = get_post_meta(get_the_ID(), 'wpcf-song-av', true);
// video id from url
$YouTubeCheck = preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $ytURL, $Data);
    If($YouTubeCheck){
        $youtube_id1 = $Data[1];
    }
    // video json data
$dur1 = file_get_contents("https://www.googleapis.com/youtube/v3/videos?part=contentDetails&id=$youtube_id1&key=AIzaSyAbFclaJBklZ53t_UD-Xz85FbWsfD37sX0");
$duration_key1 = json_decode($dur1, true);
$duration1 = $duration_key1['items'][0]['contentDetails']['duration'];
$start = new DateTime('@0');
$start->add(new DateInterval($duration1));
$h11 = $start->format('H:i:s');
// print the value toolset meta box using print_r $h11;
}

print value toolset custom field meta box 
[toolset custom field meta box][2]

Solution

i find the solution of my coding

<script>
    jQuery('.Import').live('click', function(e) {
        e.preventDefault();
        jQuery('#save').click();
    });
              
    </script>

add the jquery script in same file.

$ytURL = get_post_meta(get_the_ID(), 'wpcf-song-av', true);

change to

$ytURL = $_POST['ytext'];

add text field

<input id="textbox_id" name="ytext" placeholder="YT ID here" type="text" />
<input type="submit"  name="Import" class="Import" id="Import"  />

Answered By - mrpuyal

Answer Checked By - Cary Denson (PHPFixing Admin)

Read More