How to rearrange fields in comment_form()

Im using a custom filter to change the fields, but can´t figure out how to change the order of the fields in the comment form.

Desired order:

Read More
  • comment field (first/top)
  • name
  • email
  • website

This is the code which I am currently using:

function alter_comment_form_fields($fields){
    $fields['comments'] = 'Test';
    $fields['author'] = '<p class="comment-form-author">' . '<label for="author">' . __( 'Your name, please' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
                    '<input id="author" name="author" type="text" placeholder="John Smith" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>';
    $fields['email'] = 'next';  //removes email field
    //$fields['url'] = '';  //removes website field

    return $fields;
}

add_filter('comment_form_default_fields','alter_comment_form_fields');

Related posts

Leave a Reply

5 comments

  1. That’s pretty simple. You just have to take the textarea out of the default fields – filter 'comment_form_defaults' – and print it on the action 'comment_form_top':

    <?php # -*- coding: utf-8 -*-
    /**
     * Plugin Name: T5 Comment Textarea On Top
     * Description: Makes the textarea the first field of the comment form.
     * Version:     2012.04.30
     * License:     MIT
     * License URI: http://www.opensource.org/licenses/mit-license.php
     */
    
    // We use just one function for both jobs.
    add_filter( 'comment_form_defaults', 't5_move_textarea' );
    add_action( 'comment_form_top', 't5_move_textarea' );
    
    /**
     * Take the textarea code out of the default fields and print it on top.
     *
     * @param  array $input Default fields if called as filter
     * @return string|void
     */
    function t5_move_textarea( $input = array () )
    {
        static $textarea = '';
    
        if ( 'comment_form_defaults' === current_filter() )
        {
            // Copy the field to our internal variable …
            $textarea = $input['comment_field'];
            // … and remove it from the defaults array.
            $input['comment_field'] = '';
            return $input;
        }
    
        print apply_filters( 'comment_form_field_comment', $textarea );
    }
    
  2. There are obviously a number of ways to accomplish this. For example, to move the comment field to the bottom of the form you would use code like this:

    add_filter( 'comment_form_fields', 'move_comment_field' );
    function move_comment_field( $fields ) {
        $comment_field = $fields['comment'];
        unset( $fields['comment'] );
        $fields['comment'] = $comment_field;
        return $fields;
    }
    

    If you wanted to rearrange all the fields:

    1. unset all the fields
    2. put the fields back into the array but in the order you want them displayed

    Simple right? I figured I’d spell it out explicitly for the next noobie like me to find this page and not find the answers useful.

  3. I liked toscho answer.
    However I wanted to use a custom textarea, so it didn’t work in that case.
    I used the same hooks but with separate functions:

    add_filter( 'comment_form_defaults', 'remove_textarea' );
    add_action( 'comment_form_top', 'add_textarea' );
    
    function remove_textarea($defaults)
    {
        $defaults['comment_field'] = '';
        return $defaults;
    }
    
    function add_textarea()
    {
        echo '<p class="comment-form-comment"><textarea id="comment" name="comment" cols="60" rows="6" placeholder="write your comment here..." aria-required="true"></textarea></p>';
    }
    
  4. the fields od comment form are in the array $fields in function comment_form(). You can hook inside the filter comment_form_default_fields and reorder the array.

    Also you can hook inside filter comment_form_defaults and change the defaults; leave all data in array and change only the fieldof the array with your custom fields; include the html.

    the default if $fields:

          $fields =  array(
              'author' => '<p class="comment-form-author">' . '<label for="author">' . __( '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">' . __( 'Email' ) . '</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">' . __( 'Website' ) . '</label>' .
                          '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',
          );