Custom Field Added In Comment Form Not Showing In Edit

Question

This is my code in functions.php for adding the custom field in comment form

add_filter( 'comment_form_default_fields', 'add_phonenumber_field' );
function add_phonenumber_field($fields) {
    $fields['phonenumber'] = '<p class="comment-form-phonenumber"><label for="phonenumber">Phone Number <span class="required">*</span></label>' .
    '<input id="phone-number" name="phone-number" type="tel" pattern="[\+]\d{2}[\(]\d{3}[\)]\d{3}[\-]\d{4}" title="Phone Number (Format: +63(123)456-7980)" aria-required="true" required="required"/></p>';
    return $fields;
}

This is how comment form looks like now

But when I send the comment and click edit in the Dashboard under Comments tab, no phone number field is there.

How can I make it appear in when I edit the comment and display it in the approved comments on the front-end? Thanks for help!

Answer 1

Here's all of the code necessary to handle:

• displaying the custom comment form field on the front end (you already have that)
• displaying phone number within approved comments
• editing the phone numbber field on the back end within the edit comment page
• displaying the phone number within a custom column on the comment listing page

A good bit of this code was adapted from this great tutorial.

Display custom meta field on comment form on front end when submitting comment

// Display the phone number field on the front end.
add_filter( 'comment_form_default_fields', 'wpse248957_add_phonenumber_field' );
function wpse248957_add_phonenumber_field( $fields ) {
    $fields['phonenumber'] = 
        '<p class="comment-form-phonenumber">' .
            '<label for="phone-number">Phone Number <span class="required">*</span></label>' .
            '<input id="phone-number" name="phone-number" type="tel" ' . 
                'pattern="[\+]\d{2}[\(]\d{3}[\)]\d{3}[\-]\d{4}" ' . 
                'title="Phone Number (Format: +63(123)456-7980)" aria-required="true" required="required"/>' .
        '</p>';
    return $fields;
}

Ensure phone number was specified, save comment meta data when comment is saved

// Add the filter to check whether the comment meta data has been filled
add_filter( 'preprocess_comment', 'wpse248957_verify_comment_meta_data' );
function verify_comment_meta_data( $commentdata ) {
  if ( ! isset( $_POST['phone-number'] ) ) {
        wp_die( __( 'Error: Please enter your phone number. Hit the Back button ' .
            'on your Web browser and resubmit your comment with a phone number.', 'text_domain' )
        );
    }

  return $commentdata;
}

// Save the comment meta data when saving the comment.
add_action( 'comment_post', 'wpse248957_save_comment_meta_data' );
function wpse248957_save_comment_meta_data( $comment_id ) {
  if ( ( isset( $_POST['phone-number'] ) ) && ( $_POST['phone-number'] != '') ) {
        $phone_number = wp_filter_nohtml_kses( $_POST['phone-number'] );
        add_comment_meta( $comment_id, 'phone-number', $phone_number );
    }
}

Register and display meta box on comment edit screen

// Register meta box on comment edit screen
add_action( 'add_meta_boxes_comment', 'wpse248957_comment_edit_add_meta_box' );
function wpse248957_comment_edit_add_meta_box() {
    add_meta_box( 'title', __( 'Phone Number', 'text-domain' ), 'wpse248957_comment_meta_box', 'comment', 'normal', 'high' );
}

// Callback function for displaying the comment meta box.
function wpse248957_comment_meta_box( $comment ) {
    $phone_number = get_comment_meta( $comment->comment_ID, 'phone-number', true );
    wp_nonce_field( 'wpse248957_comment_fields_update', 'wpse248957_comment_fields_update', false );
    ?>
    <p>
        <label for="phone-number"><?php _e( 'Phone', 'text-domain' ); ?></label>
        <input type="text" name="phone-number" value="<?php echo esc_attr( $phone_number ); ?>" class="widefat" />
    </p><?php
}

Handle updating the comment meta data

// Update comment meta data from comment editing screen 
add_action( 'edit_comment', 'wpse248957_comment_edit_meta_fields' );
function wpse248957_comment_edit_meta_fields( $comment_id ) {
    if ( ! isset( $_POST['wpse248957_comment_fields_update'] ) || 
             ! wp_verify_nonce( $_POST['wpse248957_comment_fields_update'], 'wpse248957_comment_fields_update' )
    ) {
        return;
    }

  if ( ( isset( $_POST['phone-number'] ) ) && ( $_POST['phone-number'] != '' ) ) {
        $phone_number = wp_filter_nohtml_kses( $_POST['phone-number'] );
        update_comment_meta( $comment_id, 'phone-number', $phone_number );
  } else {
        delete_comment_meta( $comment_id, 'phone-number');
  }
}

Handle custom column in comments listing

// Add phone number custom column to comments listing in admin
add_filter( 'manage_edit-comments_columns' , 'wpse248957_manage_comment_columns' );
function wpse248957_manage_comment_columns( $columns ) {
    return array_merge( $columns, 
        [ 'phone-number' => __( 'Phone Number', 'text_domain' ) ]
    );
}

// Display phone number custom column in comments listing in admin
add_action( 'manage_comments_custom_column' , 'wpse248957_manage_comments_columns', 10, 2 );
function wpse248957_manage_comments_columns( $column, $post_id ) {
    switch ( $column ) {
        case 'phone-number':
            $phone_number = get_comment_meta( $post_id, 'phone-number', true );
            echo esc_html( $phone_number );
            break;
    }
}

Display comment meta on approved comments

The phone number can be displayed within approved comments by getting the phone number meta and echoing it within the callback function used by wp_list_comments():

$phone_number = get_comment_meta( $comment->comment_ID, 'phone-number', true );
echo esc_html( $phone_number );

Answer 2

You need to use the add_meta_box( $id, $title, $callback, $post_type, $context, $priority, $callback_args ); functionality of WordPress to add the comment extra field to the comments edit. Please have a look here you'll find a detail guide line here on "How to add extra fields on comments".