Support » Fixing WordPress » Change “Comments” form.

  • Hello,

    I’d like to edit the “comments” form: namely, I want to change the order of email/name/website fields, and change their placeholders. The image illustrates it better:

    Image
    (Sorry for Russian language)

    Usually, I use “Simple Custom CSS” plugin to override default visuals, but field order and placeholders are all HTML-related, so I am not sure how such things are done.

    • This topic was modified 2 years, 9 months ago by delifort.
    • This topic was modified 2 years, 9 months ago by delifort.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi delifort, that would be easy, please add this code in the “functions.php” file in your currently active theme (hopefully a child one!):

    // change comment form fields order
    add_filter( 'comment_form_fields', 'mo_comment_fields_custom_order' );
    function mo_comment_fields_custom_order( $fields ) {
    	$comment_field = $fields['comment'];
    	$author_field = $fields['author'];
    	$email_field = $fields['email'];
    	$url_field = $fields['url'];
    	unset( $fields['comment'] );
    	unset( $fields['author'] );
    	unset( $fields['email'] );
    	unset( $fields['url'] );
    	// the order of fields is the order below, change it as needed:
    	$fields['comment'] = $comment_field;
    	$fields['author'] = $author_field;
    	$fields['email'] = $email_field;
    	$fields['url'] = $url_field;
    	// done ordering, now return the fields:
    	return $fields;
    }

    This unsets all comment form fields and then set them back, switching the Email and Name fields – but you could switch any of them by swapping the 4 lines before the “return” as you need.

    Hope this helps 🙂
    Cheers!
    Alex.

    Thread Starter delifort

    (@delifort)

    @alexmoise

    Thanks. That’s exactly what I needed for the fields order.

    What about the placeholders? E.g., I want the placeholder to say “E-mail (optional)” instead of just “E-mail”. Can it also be changed?

    Welcome,

    There are a number of ways to customize that text,

    The easiest way would be to use a plugin like Loco Translate, create a new language (like “My custom English”) and change things around as needed 🙂

    Another approach is to redefine the comment form HTML as you need it, with the following bits of code added in the “functions.php” file of your (child?) theme:

    // comment form fields re-defined:
    add_filter( 'comment_form_default_fields', 'mo_comment_fields_custom_html' );
    function mo_comment_fields_custom_html( $fields ) {
    	// first unset the existing fields:
    	unset( $fields['comment'] );
    	unset( $fields['author'] );
    	unset( $fields['email'] );
    	unset( $fields['url'] );
    	// then re-define them as needed:
    	$fields = [
    		'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'A CUSTOM COMMENT LABEL', 'noun', 'textdomain' ) . '</label> ' .
    			'<textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" aria-required="true" required="required"></textarea></p>',
    		'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'A CUSTOM NAME LABEL', 'textdomain'  ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
    			'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30" maxlength="245"' . $aria_req . $html_req . ' /></p>',
    		'email'  => '<p class="comment-form-email"><label for="email">' . __( 'A CUSTOM EMAIL LABEL', 'textdomain'  ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
    			'<input id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30" maxlength="100" aria-describedby="email-notes"' . $aria_req . $html_req  . ' /></p>',
    		'url'    => '<p class="comment-form-url"><label for="url">' . __( 'A CUSTOM WEBSITE LABEL', 'textdomain'  ) . '</label> ' .
    			'<input id="url" name="url" ' . ( $html5 ? 'type="url"' : 'type="text"' ) . ' value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" maxlength="200" /></p>',
    	];
    	// done customizing, now return the fields:
    	return $fields;
    }
    // remove default comment form so it won't appear twice
    add_filter( 'comment_form_defaults', 'mo_remove_default_comment_field', 10, 1 ); 
    function mo_remove_default_comment_field( $defaults ) { if ( isset( $defaults[ 'comment_field' ] ) ) { $defaults[ 'comment_field' ] = ''; } return $defaults; }

    Then, in the code above, change “A CUSTOM … LABEL” with the text you need,

    BUT please beware that the comment form HTML might be also replaced by theme or a plugin and re-replacing it this way could override that (and as far as I can see in your screenshot it seems that you already have a custom comment form).
    Also if you decide to go with the code above then the first re-ordering code is not necessary anymore, as the order in this code will set the fields order anyway.

    So, test around and see what you get. I’d love to know which way you go and the results you get 🙂

    Alex.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change “Comments” form.’ is closed to new replies.