Home    Articles

 

How to change the comment form in wordpress.

 

Changing comment form in wordpress is very useful when you want a custom filed style, or to remove labels and more.

First you need to find the file that handle this.
That file is located in wp-content/themes/[YOUR-THEME]/comment-template.php.
Open that file with an editor and look for a function called “comment_form( $args = array(), $post_id = null )” , you probably can find it at line 1509.
The code that generate these fields should look something like this:

$fields =  array(
		'author' => '<p class="comment-form-name"><label for="name">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
		            '<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' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
		            '<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>',
	);

Let’s say that we want to remove labels and make the name,email,website fields smaller and we probably want to have some placeholders in order to replace the labels.
The code will look something like this:

$fields =  array(
		'author' => '' .
		            '<input id="author" class="comment-field" placeholder="your name (is required)" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
		'email'  => '' .
		            '<input id="email" class="comment-field" name="email" placeholder="your email (is required)" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
		'url'    => '' .
		            '<input id="url" class="comment-field" name="url" placeholder="your website" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',
	);

I added a class called comment-field just becouse we want to change only these fileds.
Now that we have the fields with the new class let’s make some css. You can do this in two ways.
Either you go to wp-content/themes/[YOUR-THEME]/style.css , open the file and add the code below or you can use a plugin to change the style, like i do.
For example you can use “My Custom Css” plugin.

.comment-field
{ 
  font-style:italic;
  padding:6px !important;
  color:#000;
}

[note]: you may not find the comment-template.php file in [YOUR-THEME], then go to wp-include/comment-template.php.
this is the default file for your comment form and must exist. You can edit this but it is very important to make a backup of it.
you may need it later.

by