Customizing Wordpress Comment Form Fields and Submit Button

Since Wordpress version 3, the comment form has been standarized and can be displayed by using comment_form() function at the theme code, see the reference. The function accepts 2 parameters, $args and $post_id. Customization for the form fields and textarea markups can be done via $args array. see also this file for reference: wp-includes/comment-template.php at comment_form() function.

The other way to achieve form field’s customization is by using filters:

comment_form_default_fields filter can be used for customizing comment form fields. comment_form_field_comment filter used for comment form’s textarea.

So we have full control for outputting the form fields. This is very useful especially when we are using a front end framework like Bootstrap. We need to change the form field’s markup to conform the bootstrap way for making a form, For example:

/*** Customizing comment form to support Bootstrap 3
 */
function wp_bootstrap_comment_form_fields($fields) {
 $commenter = wp_get_current_commenter();
 $req = get_option( 'require_name_email' );
 $aria_req = ( $req ? " aria-required='true'" : '' );
 $html5 = 'html5' === current_theme_supports( 'html5', 'comment-form' ) ? 'html5' : 'xhtml';
 $fields = array(
 'author' => '<div>' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span>*</span>' : '' ) . '</label> ' .
 '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></div>',
 'email' => '<div><label for="email">' . __( 'Email' ) . ( $req ? ' <span>*</span>' : '' ) . '</label> ' .
 '<input id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></div>',
 'url' => '<div><label for="url">' . __( 'Website' ) . '</label> ' .
 '<input id="url" name="url" ' . ( $html5 ? 'type="url"' : 'type="text"' ) . ' value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></div>',
 );
 return $fields;
}
add_filter( 'comment_form_default_fields','wp_bootstrap_comment_form_fields' );

This can be done easily in Wordpress.

Customize Submit Button

But here comes an issue : There is no args variable or filter to customize the markup of submit button. While other fields have custom args, lms plugins, and filters to allow customization, the submit button markup is kinda hardcoded. The only thing can be customized via args is the button’s id and the label. Yeah only the id and label, We even cannot add class to the button. So how to customize the submit button?

There are several ways to achieve this:

1. Create your own custom_comment_form() function.

copy it based on from comment_form() and put in your functions.php theme file. Then use custom_comment_form() instead of comment_form() at your own theme. By doing this, you will have all the controls for outputting the form markups cons: too much DRY. this is only acceptable if you make huge overhaul for your comment form.

2. Customize the submit button using javascript

Lets say, you want to add class to the button, then do it via javascript. This example will add Bootstrap class “btn btn-default” to your submit button.

jQuery(document).ready(function(){
  jQuery("#respond #submit").addClass("btn btn-default");
});

cons: this required js enabled

3. Do it in CSS

if you just need a styling customization, just style it in css using #submit id

cons: Front end frameworks mostly require you to add class/es for the button (for example, Bootstrap need ‘btn’ class and may need additional ‘btn-default’ class). Since you can’t add a class to the button. You have to implement the same styling to the button’s id. Any style at ‘btn’ and ‘btn-default’ need to be copied to #submit id. this will make bigger css filesize.

Since Bootstrap let you made a customization using LESS. You can achieve it via mixin.

#respond #submit {
  .btn();
  .btn-default();
}

but the result is a significant additional code in your css. If this is just for styling submit button, then i dont think this is worth-it. even though it will produce semantically better html code.

4. Hide the original submit button and add a your own custom button.

This method implemented in this article:

http://www.codecheese.com/2013/11/wordpress-comment-form-with-twitter-bootstrap-3-supports/

Basically you hide the default button using css, and then add the new button using comment_form action. This action can be used for adding things at the bottom of the comment form.

Cons: We have two submit buttons, Even though only one button is visible to user, this is not a good markup structure.

Conclusion

All the solutions might not ideal. But you can choose the best for you. I think WordPress should let us to customize the submit button. Yeah hopefully this will addressed in future version of WordPress.

Bayu Rizaldhan Rayes