I searched high and low for a good tutorial on how to change the HTML of the wordpress comment form. From the articles I did find I managed to put together something that works. Feel free to post a comment if there is a better way of doing this…
I put the below code in functions.php and comment_form(); in my comments.php
The code below is my modified version. For defaults simply add or replace my code with http://codex.wordpress.org/Function_Reference/comment_form
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | add_filter( 'comment_form_defaults', 'my_comment_defaults');
function my_comment_defaults($defaults) {
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$defaults = array(
'fields' => array(
'author' => '<div><label for="author">' . __( 'Name' ) . ( $req ? '<span class="required">*</span>' : '' ) . '</label> ' . '<input id="author" name="author" placeholder="your name" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></div>',
'email' => '<div><label for="email">' . __( 'Email' ) . ( $req ? '<span class="required">*</span>' : '' ) . '</label> ' . '<input id="email" name="email" placeholder="email@address.co.uk" type="email" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></div>'
),
'comment_field' => '<div><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" placeholder="your comment"></textarea></div>',
'must_log_in' => '<p class="must-log-in">' . sprintf( __( 'You must be <a href="%s">logged in</a> to post a comment.' ), wp_login_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
'logged_in_as' => '<p class="logged-in-as">' . sprintf( __( 'Logged in as <a href="%1$s">%2$s</a>. <a href="%3$s" title="Log out of this account">Log out?</a>' ), admin_url( 'profile.php' ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
'comment_notes_before' => '<fieldset>',
'comment_notes_after' => '</fieldset>',
'id_form' => 'commentform',
'id_submit' => 'submit',
'title_reply' => __( 'Leave a Comment' ),
'title_reply_to' => __( 'Leave a Reply %s' ),
'cancel_reply_link' => __( 'Cancel reply' ),
'label_submit' => __( 'Comment' ),
);
return $defaults;
} |
You will notice I have made the following modifications
- Removed the website field
- Added type=”email” to the Email field (HTML5)
- Added placeholder text (HTML5)
- Removed the default text from the top and bottom of the form and replaced with <fieldset></fieldset>
- Moved the required * inside the label
- Changed the “Leave a Reply” title to “Leave a Comment”
- Changed the text of the submit button
