How to make the custom meta boxes support for the visual composer in WordPress?

I am using the visual composer for the WordPress posts and pages actually for over all. But I want to make some custom meta boxes under the screen of the post editor. Actually already I have made the fields. But now I want to make those fields available in the visual composer. Actually I want to add those fields in the visual editor. How can I do that? Please help me with your valuable knowledge.

Here is my code of the meta boxes

<?php

function myplugin_add_meta_box() {

$screens = array( 'post', 'page' );

foreach ( $screens as $screen ) {

    add_meta_box(
        'myplugin_sectionid',
        __( 'My Post Section Title', 'myplugin_textdomain' ),
        'myplugin_meta_box_callback',
        $screen
    );
 }
}
add_action( 'add_meta_boxes', 'myplugin_add_meta_box' );

function myplugin_meta_box_callback( $post ) {
wp_nonce_field( 'myplugin_save_meta_box_data', 'myplugin_meta_box_nonce'   );
$value = get_post_meta( $post->ID, '_my_meta_value_key', true );

echo '<label for="myplugin_new_field">';
_e( 'Description for this field', 'myplugin_textdomain' );
echo '</label> ';
echo '<input type="text" id="myplugin_new_field" name="myplugin_new_field" value="' . esc_attr( $value ) . '" size="25" />';
}

function myplugin_save_meta_box_data( $post_id ) {

if ( ! isset( $_POST['myplugin_meta_box_nonce'] ) ) {
    return;
}

// Verify that the nonce is valid.
if ( ! wp_verify_nonce( $_POST['myplugin_meta_box_nonce'], 'myplugin_save_meta_box_data' ) ) {
    return;
}

if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
    return;
}

// Check the user's permissions.
if ( isset( $_POST['post_type'] ) && 'page' == $_POST['post_type'] ) {

    if ( ! current_user_can( 'edit_page', $post_id ) ) {
        return;
    }

} else {

    if ( ! current_user_can( 'edit_post', $post_id ) ) {
        return;
    }
}

/* OK, it's safe for us to save the data now. */

// Make sure that it is set.
if ( ! isset( $_POST['myplugin_new_field'] ) ) {
    return;
}

// Sanitize user input.
$my_data = sanitize_text_field( $_POST['myplugin_new_field'] );

// Update the meta field in the database.
update_post_meta( $post_id, '_my_meta_value_key', $my_data );
}
add_action( 'save_post', 'myplugin_save_meta_box_data' );

Related posts

1 comment

  1. I see that you are echoing your fields as inputs. You need to use the wp_editor() function instead. It will take care of the wysiwyg (visual editor) field creation for you.

Comments are closed.