Custom Meta Boxes are super fun. They are very essential when building Plugins or Themes which contain much more advanced functionalities.

So let’s see how to create a Custom Meta Box with Textarea input?

Part 1. Create the Meta Box

function rohitink_add_meta_box() {
	add_meta_box(
		'rohitink-meta',
		__( 'My Meta Box Title', 'text-domain' ),
		'rohitink_meta_html',
		'post', //Post Type
		'normal', //Location
		'high' //Priority
	);	
}
add_action( 'add_meta_boxes', 'rohitink_add_meta_box', 1 );

2. Add your Textarea input field

function rohitink_meta_html( $post) {
	wp_nonce_field( '_rohitink_meta_nonce', 'rohitink_meta_nonce' ); ?>
        <p>
		<label for="rohitink_meta_content"><?php _e( 'My Textarea', 'text-domain' ); ?></label><br>
		<textarea name="rohitink_meta_content" id="rohitink_meta_content"><?php echo rohitink_get_meta( 'rohitink_meta_content' ); ?>"></textarea>
	</p>
<? } //endfunction ?>

3. Function to fetch the Value of Meta Box

function rohitink_get_meta( $value ) {
	global $post;

	$field = get_post_meta( $post->ID, $value, true );
	if ( ! empty( $field ) ) {
		return is_array( $field ) ? stripslashes_deep( $field ) : stripslashes( wp_kses_decode_entities( $field ) );
	} else {
		return false;
	}
}

4. Function to Save the Values of Meta on Admin Screen

function rohitink_meta_save( $post_id ) {
	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
	if ( ! isset( $_POST['rohitink_meta_nonce'] ) || ! wp_verify_nonce( $_POST['rohitink_meta_nonce'], '_rohitink_meta_nonce' ) ) return;
	
	if ( ! current_user_can( 'edit_post', $post_id ) ) return;

	if ( isset( $_POST['rohitink_meta_content'] ) )
		update_post_meta( $post_id, 'rohitink_meta_content', esc_attr( $_POST['rohitink_meta_content'] ) );
}
add_action( 'save_post', 'rohitink_meta_save' );

Now, these 4 Things will Ensure that we get a Textarea Metabox and its values are being properly saved and being output wherever we want.

Now the Problem with a textarea is that a regular user doesn’t know a lot of HTML code. So he cannot create stuff like unordered lists, or format the text easily. So we need to replace the textarea created in part 2 with a WYSIWYG Editor. Everything else remains the same.

Creating a WYSIWYG Editor

Delete the Code you added in STEP 2 and replace it with the following:

function rohitink_meta_html( $post) {
	wp_nonce_field( '_rohitink_meta_nonce', 'rohitink_meta_nonce' ); ?>
		<p><label for="rohitink_meta_content"><?php _e( 'My Textarea', 'text-domain' ); ?></label></p><br>
	<?php
                $meta_content = wpautop( rohitink_get_meta( 'rohitink_meta_content' ),true);
                wp_editor($meta_content, 'meta_content_editor', array(
                        'wpautop'               =>  true,
                        'media_buttons' =>      false,
                        'textarea_name' =>      'rohitink_meta_content',
                        'textarea_rows' =>      10,
                        'teeny'                 =>  true
                ));
        ?>	
<? } //endfunction ?>

That’s it and the code is complete. Enjoy your WYSIWYG Custom Meta box, if you are facing any difficulty comment below and I will try to help you out.