I have to add the custom field in the WordPress admin panel and I tried and it's displaying. Below is the screenshot.

I am using the below code.

function wordpress_add_metaboxes() {
    add_meta_box(
        'wordpress_register_fields',
        'Information',
        'wordpress_register_fields',
        'product',
        'normal',
        'default'
    );  
}

add_action( 'add_meta_boxes', 'wordpress_add_metaboxes' );

function wordpress_register_fields() {
    global $post;
    // Nonce field to validate form request came from current site
    wp_nonce_field( basename( __FILE__ ), 'layout' );
    // Output the field
    echo '<div class="create_custom_layout"><div class="row">
    <div class="col-md-6">
         <h4>Description</h4>
         <input type="text" name="description" value="' . esc_textarea( get_post_meta( $post->ID, 'Description', true ) )  . '" class="widefat">
    </div>

    <div class="col-md-6">
            <h4>Banner image</h4>
            <input type="button" id="meta-image-button" class="button" value="Choose or Upload an Image" style="padding: 8px 10px; height: auto; line-height: normal;"/>
            <input type="hidden" name="client_image" id="meta-image" class="meta_image" value="'.get_post_meta(get_the_ID(), 'client_image', true ).'" /><br />
            <img style="width: 100px;height: 100px;object-fit: cover;" id="meta-image-preview" src="'.get_post_meta(get_the_ID(), 'client_image', true ).'" />

    </div>
</div></div>
<style>
.create_custom_layout .row{display: flex;flex-wrap: wrap;}
.create_custom_layout .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
}
</style>
      <script>
     jQuery("#meta-image-button").click(function() {
            var send_attachment_bkp = wp.media.editor.send.attachment;
            wp.media.editor.send.attachment = function(props, attachment) {
        jQuery("#meta-image").val(attachment.url);
            jQuery("#meta-image-preview").attr("src",attachment.url);
                wp.media.editor.send.attachment = send_attachment_bkp;
            }
            wp.media.editor.open();
            return false;
        });
        </script>';
}

Now my issue is, How can I use the editor for the description field?

I have to add the custom field in the WordPress admin panel and I tried and it's displaying. Below is the screenshot.

I am using the below code.

function wordpress_add_metaboxes() {
    add_meta_box(
        'wordpress_register_fields',
        'Information',
        'wordpress_register_fields',
        'product',
        'normal',
        'default'
    );  
}

add_action( 'add_meta_boxes', 'wordpress_add_metaboxes' );

function wordpress_register_fields() {
    global $post;
    // Nonce field to validate form request came from current site
    wp_nonce_field( basename( __FILE__ ), 'layout' );
    // Output the field
    echo '<div class="create_custom_layout"><div class="row">
    <div class="col-md-6">
         <h4>Description</h4>
         <input type="text" name="description" value="' . esc_textarea( get_post_meta( $post->ID, 'Description', true ) )  . '" class="widefat">
    </div>

    <div class="col-md-6">
            <h4>Banner image</h4>
            <input type="button" id="meta-image-button" class="button" value="Choose or Upload an Image" style="padding: 8px 10px; height: auto; line-height: normal;"/>
            <input type="hidden" name="client_image" id="meta-image" class="meta_image" value="'.get_post_meta(get_the_ID(), 'client_image', true ).'" /><br />
            <img style="width: 100px;height: 100px;object-fit: cover;" id="meta-image-preview" src="'.get_post_meta(get_the_ID(), 'client_image', true ).'" />

    </div>
</div></div>
<style>
.create_custom_layout .row{display: flex;flex-wrap: wrap;}
.create_custom_layout .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
}
</style>
      <script>
     jQuery("#meta-image-button").click(function() {
            var send_attachment_bkp = wp.media.editor.send.attachment;
            wp.media.editor.send.attachment = function(props, attachment) {
        jQuery("#meta-image").val(attachment.url);
            jQuery("#meta-image-preview").attr("src",attachment.url);
                wp.media.editor.send.attachment = send_attachment_bkp;
            }
            wp.media.editor.open();
            return false;
        });
        </script>';
}

Now my issue is, How can I use the editor for the description field?

• plugins
• plugin-development
• html
• wp-editor

• You might be better looking into plugins, most notable Advanced Custom Fields, which will help with the heavy lifting of creating custom fields and saving their data cleanly. – Q Studio Commented Jan 23, 2021 at 10:34
• Naren, you just want to use the old classic editor for the description field? It’s not that difficult if that’s what you want, just confirm for me and I’ll post the answer. – Tony Djukic Commented Jan 23, 2021 at 14:01
• @TonyDjukic, Yes, Please update your answer. I'll implement it on my project. – Naren Verma Commented Jan 23, 2021 at 14:04

1 Answer 1

Naren,

The actual set-up for the classic/TinyMCE editor is relatively straightforward, I have updated your wordpress_register_fields() function with the necessary lines. For wp_editor() to work you need to get the content if there's any saved, id the field and then provide settings arguments. (https://developer.wordpress/reference/functions/wp_editor/)

function wordpress_register_fields() {
    global $post;
    // Nonce field to validate form request came from current site
    wp_nonce_field( basename( __FILE__ ), 'layout' );
    // Output the field
    echo '<div class="create_custom_layout"><div class="row">';
        echo '<div class="col-md-6">';
            echo '<h4>Description</h4>';
            //We first get the post_meta from the DB if there's any there.
            $description        = get_post_meta( $post->ID, 'Description', true );
            //Second ID the field.
            $description_field  = 'Description';
            //Provide the settings arguments for this specific editor in an array
            $description_args   = array( 'media_buttons' => false, 'textarea_rows' => 12, 'textarea_name' => 'description',
            'editor_class' => 'description-editor widefat', 'wpautop' => true );
            wp_editor( $description, $description_field, $description_args );
        echo '</div>';

        echo '<div class="col-md-6">
            <h4>Banner image</h4>
            <input type="button" id="meta-image-button" class="button" value="Choose or Upload an Image" style="padding: 8px 10px; height: auto; line-height: normal;"/>
            <input type="hidden" name="client_image" id="meta-image" class="meta_image" value="'.get_post_meta(get_the_ID(), 'client_image', true ).'" /><br />
            <img style="width: 100px;height: 100px;object-fit: cover;" id="meta-image-preview" src="'.get_post_meta(get_the_ID(), 'client_image', true ).'" />

        </div>
    </div>
</div>
<style>
    .create_custom_layout .row{display: flex;flex-wrap: wrap;}
    .create_custom_layout .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }
</style>
<script>
    jQuery("#meta-image-button").click(function() {
        var send_attachment_bkp = wp.media.editor.send.attachment;
        wp.media.editor.send.attachment = function(props, attachment) {
    jQuery("#meta-image").val(attachment.url);
        jQuery("#meta-image-preview").attr("src",attachment.url);
            wp.media.editor.send.attachment = send_attachment_bkp;
        }
        wp.media.editor.open();
        return false;
    });
</script>';
}

For something this straightforward I usually prefer not to use plugins and bloat the site's codebase when the alternative is literally just leveraging what WordPress already has and implementing it with an additional 3-5 lines of code.

My only suggestions is to perhaps come up with a more explicitly identifying name than description as that's pretty generic.