Convert WordPress Comments Form into a Table
If you’re fed up with your comment form fields not lining up properly here’s how to turn the form fields into a table which you can then use CSS to format.
In your theme’s functions.php file add the following code:
<php add_action( 'comment_form_before_fields', 'uniquename_comment_form_before_fields' ); function uniquename_comment_form_before_fields() { echo '<table id="PostCommentTable">'; } add_action( 'comment_form', 'uniquename_comment_form' ); function uniquename_comment_form() { echo '</td></tr></table>'; } ?>
Then in your comments.php file locate the line that reads ‘comment_form()’ and replace with the following:
<?php $comment_args = array( 'fields' => apply_filters( 'comment_form_default_fields', array( 'author' => '<tr><td>' . '<label for="author">' . __( 'Your Name' ) . '</label> ' . ( $req ? '<span>*</span>' : '' ) . '</td><td><input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' />' . '</td></tr><!-- #form-section-author .form-section -->', 'email' => '<tr><td>' . '<label for="email">' . __( 'Your Email' ) . '</label> ' . ( $req ? '<span>*</span>' : '' ) . '</td><td><input id="email" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' />' . '</td></tr><!-- #form-section-email .form-section -->', 'url' => '' ) ), 'comment_field' => '<tr><td>' . '<label for="comment">' . __( 'Let us know what you have to say:' ) . '</label></td>' . '<td><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>' . '</td></tr><!-- #form-section-comment .form-section -->', 'comment_notes_after' => '<tr><td> </td><td>', ); comment_form($comment_args); ?>
This will then turn your comment form into a table with the id of PostCommentTable. Then simply add some CSS into your styles.css file (also in your theme directory):
#PostCommentTable td { vertical-align:top; padding:2px; } #PostCommentTable tr td:first-child { text-align:right; padding-top:8px; }
And you end up with a really nice looking comment table