How to style and change comment form in WordPress

How to style and change comment form in WordPress

The WordPress function comment_form() is used for generating commenting form within WordPress theme. The great thing about this function is that it has wide range of parameters you can use to perform fine tuning. You could do something as simple as changing the wording (“Leave a reply”), or you could also create advanced layouts. For example, why would you have author and email input fields both in single line, given that in wider layouts on higher resolutions commenter will not fill even 50% of the input field?

As for available parameters, if you check official WordPress documentation, you will find the following:

‘fields’ (array) { Default comment fields, filterable by default via the ‘comment_form_default_fields’ hook.
‘author’ (string) Comment author field HTML.
’email’ (string) Comment author email field HTML.
‘url’ (string) Comment author URL field HTML. }
…and many others.
Most of these can be changed only by adding new items into functions’ array, such as (make sure you include text domain for translation purposes):

comment_form(array(
    'label_submit' => __('Post my Comment', 'bbird-under'),
    'title_reply' => __('Have something to say?', 'bbird-under'),
));

But if you look at the list of parameters closely, you’ll find ‘fields’ => $fields. You may omit this one at first, but as it turns out, this could be the most important parameter for any advanced layout change. Let’s check on how it looks like and WordPress core:

function comment_form( $args = array(), $post_id = null ) {
...
    $commenter = wp_get_current_commenter();
    $user = wp_get_current_user();
    $user_identity = $user->exists() ? $user->display_name : ''; 
... 
    $req      = get_option( 'require_name_email' );
    $aria_req = ( $req ? " aria-required='true'" : '' );
    $html_req = ( $req ? " required='required'" : '' );
    $html5    = 'html5' === $args['format'];
    $fields   =  array(
        'author' => '
' . ' ' .
                    '
',
        'email'  => '
 
',
...

By the quick look, $fields array is what does the magic – if determines how the layout of default form will look like. Also, in order to avoid PHP warnings and notices (undeclared variable), you will also need to redeclare $req, $aria_req, etc.

Finally, this is how it would look like implemented into comments.php template file:

     '
' . ' ' . '
',
    'email' => '
',
    'url' => '
 ' . '
'
);

comment_form(array(     
    'fields' => $fields,
    'label_submit' => __('Post my Comment', 'bbird-under'),
    'title_reply' => __('Have something to say?', 'bbird-under'),
    'title_reply_to' => __('Respond to %s', 'bbird-under'),
    'comment_notes_before' => '
' . __('(No worries, we will keep your email safe! Also, make sure you fill in email and name fields before posting a comment.)', 'bbird-under') . '
'
));
?>

BUT, if you were careless as I was, you likely omitted the fact that $fields is filterable via ‘comment_form_default_fields’ hook. If unsure how to use filters, check on my quick tutorial.

Implementation through filters is easy and would look like this:

function bbird_under_comment_form_layout ($fields) {
    
$commenter = wp_get_current_commenter();
$req       = get_option('require_name_email');
$aria_req  = ($req ? " aria-required='true'" : '');
$html_req  = ($req ? " required='required'" : '');
$html5     = 'html5';

$fields = array(
    'author' => '
' . ' ' . '
',
    'email' => '
',
    'url' => '
 ' . '
'
);
   return $fields;  
   
}
add_filter( 'comment_form_default_fields', 'bbird_under_comment_form_layout' );

While our comment_form function call would look like this:


     __('Post my Comment', 'bbird-under'),
    'title_reply' => __('Have something to say?', 'bbird-under'),
    'title_reply_to' => __('Respond to %s', 'bbird-under'),
    'comment_notes_before' => '
' . __('(No worries, we will keep your email safe! Also, make sure you fill in email and name fields before posting a comment.)', 'bbird-under') . '
'
));
?>

Both approaches seem to be working, but given that WordPress core developers added filter here, conclusion is simple – use filter!