21

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:

  • 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');
13

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
 * Author:      Thomas Scholz <info@toscho.de>
 * Author URI:  http://toscho.de
 * 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 );
}
  • Good solution but what if you want to change the order of 3 or 4 fields? – Brad Dalton Jul 27 '14 at 4:13
  • 1
    @BradDalton The same: remove all field contents first, then print them in the desired order in comment_form_top. – fuxia Jul 27 '14 at 7:12
  • Don't know if code had changed since then but for 4.0 it seems like comment_form_before_fields is better hook then comment_form_top – Mark Kaplun Sep 26 '14 at 14:53
  • @MarkKaplun Nowadays I would pass the desired position as an argument to a class. :) – fuxia Sep 26 '14 at 14:59
4

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>';
}
  • Note that many anti-spam plugins are changing the textarea too. This has to be tested very good – I had serious problems with a similar approach. – fuxia Oct 23 '12 at 15:29
4

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, unset all the fields. Put them back into the array 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.

2

The exact CSS to do this will depend on your theme, however, here's one way:

#commentform {
display:table;
width:100%;   
}

.comment-form-comment {
display: table-header-group; 
}

The table display methods let you reorder things of arbitrary height.

More info: http://tanalin.com/en/articles/css-block-order/

  • 1
    Great idea Otto. A similar approach could be accomplished using flexbox: <br>#commentform { display: flex; flex-flow: column; } .comment-form-comment { order: -1; }. – Bryan Willis Dec 3 '15 at 12:28
1

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>',
      );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.