02 Nov

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>&nbsp;</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

Leave a Reply

Your email address will not be published. Required fields are marked *