WP_Editor is out of the custom meta-box div. How to keep wp_editor in the div?

Question

My custom post-type has custom meta-box with input field and wp_editor, below the code:

<div class="inside">
    <div>
        <label>Title</label>
        <input type="text" name="title[]">
    </div>
    <div>
        <label>Type</label>
        <input type="text" name="type[]">
    </div>
    <div>
        <label>Content</label>
        '.wp_editor($content, 'text', array(
        'wpautop' => true,
        'media_buttons' => false,
        'textarea_rows' => 5
        )
        ).'
    </div>
</div>

wp_editor is on top & out of the .inside div.

How can I have the wp_editor in the .inside div below the Content label?

Shivendra Singh · Accepted Answer · 2019-06-17T07:42:25.493

1

Use the ob_start() and ob_get_contents().

There are two other functions you typically pair it with: ob_get_contents(), which basically gives you whatever has been "saved" to the buffer since it was turned on with ob_start(), and then ob_end_clean() or ob_flush()

Attached output.

Code.

 ob_start();
         wp_editor($content, 'text', array(
            'wpautop' => true,
            'media_buttons' => false,
            'textarea_rows' => 5
            )
            );
         $output = ob_get_clean();

        echo '
        <div class="inside">
    <div>
        <label>Title</label>
        <input type="text" name="title[]">
    </div>
    <div>
        <label>Type</label>
        <input type="text" name="type[]">
    </div>
   <div style="clear:both"></div>
    <div>
        <label>Content</label>
        '.$output.'
    </div>
</div>';

edited Jun 17 '19 at 07:42

answered Jun 17 '19 at 07:11

Shivendra Singh

2,975
1
9
11

@theKing, Hi try the above code it will work as you expected. – Shivendra Singh Jun 17 '19 at 07:16
It added below as required, but unable to input any text in the editor, it is not clickable and also rich-text formatting buttons missing. – theKing Jun 17 '19 at 07:33
For me it's working. All the button appears as you mentioned in the question. Above the editor div use clear:both and check – Shivendra Singh Jun 17 '19 at 07:34
Okay, it is working. I have `foreach` loop, which is where is not working. I have multiple metaboxes (`
`).
– theKing Jun 17 '19 at 07:40
I attached the update image with text. If It's working as you expected please mark this answer. – Shivendra Singh Jun 17 '19 at 07:44

score 0 · Answer 2 · answered Jun 17 '19 at 05:46

add_action( 'add_meta_boxes', 'global_banner_setting_meta_box' );
function global_banner_setting_meta_box() {
    $post_id = $_GET['post'] ? $_GET['post'] : $_POST['post_ID'] ;

    add_meta_box(
        'banner_setting_data',
        __( 'Banner Setting', 'launchpm' ),
        'render_metabox',
        'page',
        'advanced',
        'default'
    );
}
function render_metabox( $post ) {

    field_generator( $post );
}    
function field_generator( $post ) {
    wp_nonce_field( 'banner_nonce_action', 'banner_nonce' );

    $banner_title_data = get_post_meta($post->ID,'banner_title_data_',true);
    $banner_description_data = get_post_meta($post->ID,'banner_description_data_',true);

    if(empty($banner_title_data)){$banner_title_data = '';}
    if(empty($banner_description_data)){$banner_description_data = '';}

    $banner_html_code = '<div id="postcustomstuff">';
    $banner_html_code .='<table class="form-table">';
    $banner_html_code .='<tr>';
    $banner_html_code .='<td><label style="display:block; font-weight:600; margin:0 8px;" for="banner_title_data" class="banner_title_label">' . __( 'Banner Title', 'launchpm' ) . '</label><input type="text" id="banner_title_data" name="banner_title_data" class="banner_title_data_field" placeholder="' . esc_attr__( '', 'launchpm' ) . '" value="' . esc_attr__( $banner_title_data ) . '"></td>';
    $banner_html_code .='</tr>';
    $banner_html_code .='<tr>';
    $banner_html_code .='<td><label style="display:block; font-weight:600; margin:0 8px;" for="banner_description_data" class=banner_description_data_label">' . __( 'Banner Description', 'launchpm' ) . '</label>
    <textarea id="banner_description_data" class="textarea banner_description_data_field" name="banner_description_data" placeholder="' . esc_attr__( '', 'launchpm' ) . '" rows="8">' . esc_attr__( $banner_description_data ) . '</textarea></td>
    ';
    $banner_html_code .='</tr>';
    $banner_html_code .='</table>';
    $banner_html_code .='</div>';
    echo $banner_html_code;
}
add_action( 'save_post','save_metabox_banner_data', 10, 2);
function save_metabox_banner_data($post_id, $post)
{
    $nonce_name   = $_POST['banner_nonce'];
    $nonce_action = 'banner_nonce_action';

    if ( ! isset( $nonce_name ) )
        return;
    if ( ! wp_verify_nonce( $nonce_name, $nonce_action ) )
        return;
    if ( ! current_user_can( 'edit_post', $post_id ) )
        return;
    if ( wp_is_post_autosave( $post_id ) )
        return;
    if ( wp_is_post_revision( $post_id ) )
        return;

    $banner_title_data = isset( $_POST[ 'banner_title_data' ] ) ?  $_POST[ 'banner_title_data' ]  : '';
    $banner_description_data = isset( $_POST[ 'banner_description_data' ] ) ? $_POST[ 'banner_description_data' ] : '';

    // Update the meta field in the database.
    update_post_meta( $post_id, 'banner_title_data_', $banner_title_data );
    update_post_meta( $post_id, 'banner_description_data_', $banner_description_data );

}

WP_Editor is out of the custom meta-box div. How to keep wp_editor in the div?

2 Answers2