0

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

enter image description here

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?

enter image description here

Naren Verma
  • 2,205
  • 5
  • 38
  • 95
  • Are you trying to add a metabox that uses the WYSIWIG editor? I'm not sure I understand the question. – Howard E Jan 23 '21 at 10:40
  • @HowardE, Yes, Is it possible? why I am doing this because I have to display the content and image on my page. – Naren Verma Jan 23 '21 at 12:29
  • Check this: https://stackoverflow.com/questions/3493313/how-to-add-wysiwyg-editor-in-wordpress-meta-box – Howard E Jan 23 '21 at 18:05

0 Answers0