Customise Comment form

Question

I am trying to customise the comment form so I can clearly edit the labels and style them.

<?php comment_form( $args = array(
              'id_form'           => 'commentform',  // that's the wordpress default value! delete it or edit it ;)
              'id_submit'         => 'commentsubmit',
              'title_reply'       => __( 'Leave a Reply' ),  // that's the wordpress default value! delete it or edit it ;)
              'title_reply_to'    => __( 'Leave a Reply to %s' ),  // that's the wordpress default value! delete it or edit it ;)
              'cancel_reply_link' => __( 'Cancel Reply' ),  // that's the wordpress default value! delete it or edit it ;)
              'label_submit'      => __( 'Post Comment' ),  // that's the wordpress default value! delete it or edit it ;)

              'comment_field' =>  '<p><textarea placeholder="Start typing..." id="comment" class="form-control" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>', 

              'comment_notes_after' => '<p>' .
                __( 'You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes:' ) .
                '</p><div class="">' . allowed_tags() . '</div>' 

    )); 
    ?>

How can I change it so I can target the appropriate field such as Name, Email and Website? I can't find a good tutorial to do so. Any help or direction will be appreciated.

Answer 1

The default comment form fields are defined like so:

$fields =  array(

  'author' =>
    '<p class="comment-form-author"><label for="author">' . __( 'Name', 'domainreference' ) . '</label> ' .
    ( $req ? '<span class="required">*</span>' : '' ) .
    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
    '" size="30"' . $aria_req . ' /></p>',

  'email' =>
    '<p class="comment-form-email"><label for="email">' . __( 'Email', 'domainreference' ) . '</label> ' .
    ( $req ? '<span class="required">*</span>' : '' ) .
    '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
    '" size="30"' . $aria_req . ' /></p>',

  'url' =>
    '<p class="comment-form-url"><label for="url">' . __( 'Website', 'domainreference' ) . '</label>' .
    '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
    '" size="30" /></p>',
);

And they are passed through a filter:

'fields' => apply_filters( 'comment_form_default_fields', $fields )

So to modify them, you can just add a filter:

function wpse126157_comment_form_fields( $fields ) {
    // Your code here

    // Return something
    return $fields;
}
add_filter( 'comment_form_default_fields', 'comment_form_default_fields' );

Note the important information in the Codex:

Note: To use the variables present in the above code in a custom callback function, you must first set these variables within your callback using:

$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );

So you can modify your callback accordingly:

function wpse126157_comment_form_fields( $fields ) {

    // Include these if you intend to use them
    $commenter = wp_get_current_commenter();
    $req = get_option( 'require_name_email' );
    $aria_req = ( $req ? " aria-required='true'" : '' );

    // Your code here

    // Return something
    return $fields;
}
add_filter( 'comment_form_default_fields', 'comment_form_default_fields' );