Maltpress

Web Development


Built by maltpress

Reordering WordPress comment form fields

So, in WordPress 4.4 there’s been an update to how form fields work. In order to help with tab orders, and in a kind of logical step, the comment textarea has been moved before the other form fields.

Now, the logic for this does make some sense: when you come to make a comment, you’re actually thinking about the comment first so you want to fill that in before anything else while it’s still fresh. That said, this is a pretty radical change to something which has been an accepted part of UX for a long time, so there are arguments for both.

So how do you get the old style back? Thankfully, you can easily define the fields in a comment form, and you can also set a custom comment field. We’ll need to combine these two techniques in order to fix the form field order.

Creating the comment form

Firstly, the comment form is shown using the comment_form() function. This takes an array of arguments – take a look at the function on WordPress for more details. Let’s have a look at an example of this in the wild:

$comment_form_args = array(
            'title_reply'       => __( 'Reply' ),
            'title_reply_to'    => __( 'Reply to %s' ),
            'cancel_reply_link' => __( 'Cancel Reply' ),
            'label_submit'      => __( 'Submit' ),
            'format'            => 'html5',
            'fields'            => $fields,
            'comment_field'     => is_user_logged_in() ? '<p class="comment-form-comment"><label for="comment">Your comment:</label>'
                                . ( $req ? '<span class="required">*</span>' : '' )
                                . '<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true">'
                                . '</textarea></p>' : ''
        );
        comment_form($comment_form_args);

For now, ignore the ‘comment_field’ argument. You can see that the ‘fields’ argument – which defines which fields are shown in the form – is set here. Let’s have a look at what’s in this:

$fields = array(
            'author' =>
                        '<p class="comment-form-author"><label for="author">Your name:</label>'
                        . ( $req ? '<span class="required">*</span>' : '' )
                        . '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] )
                        . '" size="30"' . $aria_req . ' />' 
                        . '</p>',
            'email' =>
                        '<p class="comment-form-email"><label for="email">Your email address:</label>'
                        . ( $req ? '<span class="required">*</span>' : '' )
                        . '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] )
                        . '" size="30"' . $aria_req . ' />'
                        . '</p>',

            'url' =>
                        '<p class="comment-form-url"><label for="url">Your web address:</label><input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] )
                        . '" size="30" /></p>',
            'comment_field' => 
                        '<p class="comment-form-comment"><label for="comment">Your comment:</label>'
                                . ( $req ? '<span class="required">*</span>' : '' )
                                . '<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true">'
                                . '</textarea></p>'
            
        );</label>

So, we’re defining the way the different form fields are going to be displayed: this is great as it enables us to add classes, data-values for Javascript, placeholder text and more. It also means that we can define a comment field, AND the order that fields are shown is determined by the order of the fields in the array. Brilliant, except for one thing: the comment field is also set in the arguments for comment_form(), and it defaults to a textarea. So to stop getting duplicate text areas, you would need to set the comment_field argument in comment_form() to ”.

So that’s it, right? Just by setting the comment form argument to null in the comment_form() function and re-doing it in the fields argument? Well, no. When a user is logged in, the fields argument is ignored, and the comment_form argument is used to define the comment field; so you’d end up with logged in users unable to commment.

To work around this, you can check if the user is logged in using a shorthand if/else statement in the comment_form() arguments array:

'comment_field'     => is_user_logged_in() ? '<p class="comment-form-comment"><label for="comment">Your comment:</label>'
                                . ( $req ? '<span class="required">*</span>' : '' )
                                . '<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true">'
                                . '</textarea></p>' : ''

And there we have it – your comment form fields re-ordered. Nice and simple.

Back to blog



Leave a comment


By using this site you consent to our use of cookies. To find out more, see our privacy policy. Continue