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
- 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');
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
- 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');
Share
Improve this question
edited Apr 29, 2012 at 21:26
mor7ifer
8,6162 gold badges20 silver badges33 bronze badges
asked Apr 29, 2012 at 19:33
jrutterjrutter
3431 gold badge2 silver badges7 bronze badges
5 Answers
Reset to default 15That'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/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 );
}
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 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.
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>';
}
The exact CSS to do this will depend on your theme, however, here's one way:
#commentform {
display:table;
width:100%;
}
ment-form-comment {
display: table-header-group;
}
The table display methods let you reorder things of arbitrary height.
More info: http://tanalin/en/articles/css-block-order/
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 field
of 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>',
);