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
|
1 2 3 4 5 6 7 8 9 10 11 |
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
|
1 2 3 4 5 6 7 |
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
|
1 2 3 4 5 6 7 8 9 10 |
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
|
1 2 3 4 5 6 7 8 9 10 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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.