If you are a wordpress user that time it’s very easy to develop your wordpress site. It’s very easy to create your website. Still now if you want to create a theme by yourself it’s time also you can do it by yourself. If you are a WordPress Theme Developer then you can easily develop your Desired WordPress Theme by yourself or it may be a contract for you too. In this case of WordPress Theme Development their have some difficult tasks that may take some times. And in some cases in it’s really tough for you. In this case we are talking with you about WordPress Comment Template.

If you need a comment box and a comments in your any post then your can take it by a simple pice of PHP code for wordPress. That is <?php comments_template(); ?> And the form will be like:

This is for a simple Comment Box. But the problem is when you want a customized comment Template as your wish. You can customize it by 2 ways.

#Way-1: You can customize it by Inspect element. After inspecting the elements you will get all the classes under it and take those classes and you can design it.

#Ways-2: In this way you can customize your whole Comment template as your wish. You can also remove any fields or you can also add any fields too. And you can also re-arrange your fields too as your wish and you can customize it 100% as your wish. For that, here you need some codes to add it in Theme’s folder. Here you will get a file functions.php in every WordPress Theme it has a functions.php file. Open it and go to very bottom of that file. And type that bellow codes one by one.

Step:1 To re-arrange all the fields as your wish.

Ex: (Comments, Name, Email, Website) to (Name, Email, Website, Comments) this format. In wordpress here have some specific name for every fields. Ex: $fields[‘comment’]; It’s for comment field. And we also take a Variable for each fields. Ex: $comment_field (This is for Comment Field) = $fields[‘comment’];

Then we unset all the fields Ex: unset( $fields[‘comment’] );

Then we Re-arrange the fields as our wish Ex: $fields[‘author’](This is the fields name) = $author_field; (This is the variable we taken). Now in the bellow you will get the whole code. You can copy and past these codes from here.

<?php
//Comment Fields custome Order
function 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['author'] = $author_field;
$fields['email'] = $email_field;
$fields['url'] = $url_field;
$fields['comment'] = $comment_field;
// done ordering, now return the fields:
return $fields;
}
add_filter( 'comment_form_fields', 'comment_fields_custom_order' );
?>
Step:2 Customize Name, Email, Website URL fields. Here another action for you by which you can now customize all the fields except Comment field. her everything must have to remain same. But from here you can change some codes as your wish. What you can change see bellow

<?php
//Make a Custome Comment fileds
function custom_fields($fields) {
$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );

$fields[ 'author' ] = '<div class="row"><div class="col-md-6 col-xs-12"><div class="commentInputer">'.
'<label for="author">' .'<i class="far fa-user"></i>'. '</label>'.
( $req ? '<span class="required"></span>' : ’ ).
'<input id="author" name="author" type="text" value="'. esc_attr( $commenter['comment_author'] ) .
'" size="30" tabindex="1"' . $aria_req . ' />'.'</div></div>';

$fields[ 'email' ] = '<div class="col-md-6 col-xs-12"><div class="commentInputer">'.
'<label for="email">' .'<i class="far fa-envelope"></i>'. '</label>'.
( $req ? '<span class="required"></span>' : ’ ).
'<input id="email" name="email" type="text" value="'. esc_attr( $commenter['comment_author_email'] ) .
'" size="30" tabindex="2"' . $aria_req . ' />'.'</div></div>';

$fields[ 'url' ] = '<div class="col-md-12"><div class="commentInputer">'.
'<label for="url">' .'<i class="fas fa-globe"></i>'. '</label>'.
'<input id="url" name="url" type="text" value="'. esc_attr( $commenter['comment_author_url'] ) .
'" size="30" tabindex="3" />'.'</div></div></div>';

return $fields;
}
add_filter('comment_form_default_fields', 'custom_fields');
?>

Here you will get all the fields with it’s name. Like $fields[ ‘author’ ], $fields[ ’email’ ], $fields[ ‘url’ ]. Under these fields here you get a place to place your codes as your wish.

Ex:

$fields[ 'author' ](This will be the fields name) = '(Here you can add all your codes. But in value=" '. esc_attr( $commenter['comment_author'] ) .' " here you need to give the comment fields value. Which value will show here. Like: In the author field, here it will show the Commenter's name)'; The others parameters are like: 'comment_author_email', 'comment_author_url'

Here the $commenter variable it has taken in the top of the function

 $commenter = wp_get_current_commenter();

Here you can also add a required option if you want. For that you need to add a code extra with that is:

.( $req ? '<span class="required"></span>' : ’ ).

And the add . $aria_req . This code in the last of the input field/tags

So the full format will for a field will look like:

$fields[ 'author' ] = '(Here the whole HTML taken by me.)<div class="row"><div class="col-md-6 col-xs-12"><div class="commentInputer">'.
'<label for="author">' .'<i class="far fa-user"></i>'. '</label>'.
( $req ? '<span class="required"></span>' : ’ ).
'<input id="author" name="author" type="text" value="'. esc_attr( $commenter['comment_author'] ) .
'" size="30" tabindex="1"' . $aria_req . ' />'.'</div></div>';

The same way to the other 2 fields.

Step-3 Now we will customize the Comment textarea to customize as your wish

Here have another function for that the code given bellow and then the explanation:

<?php //Make a Custome Comment fileds for Textarea
function Comment_textarea($comment_field) {
$comment_field = '<div class="row"><div class="col-md-12"><div class="commentInputer"><label for="" class="labelTextarea"><i class="fas fa-comment"></i></label><textarea id="comment" placeholder="" name="comment" cols="45" rows="8" maxlength="65525" aria-required="true" required="required"></textarea></div></div></div>';
return $comment_field;
}
add_filter( 'comment_form_field_comment', 'Comment_textarea' );
?>

Here you will get the function you can use it. Here you follow a variable $comment_field it’s changeable. If you want to change it you to change the code for the Step-1 where you make this variable for the comment field. Under this variable take the whole code as your wish for the Textarea message.

Step-4: Here you will get the codes for customizing your submit button.

For that the code is:

// Comment Form Submit Button Redesign
function filter_comment_form_submit_button( $submit_button, $args ) {
// make filter magic happen here...
$submit_before = '<div class="row"><div class="col-md-12">';
$submit_button = '<button type="submit" class="commentInputerBtn">submit <i class="fas fa-arrow-right"></i></button>';
$submit_after = '</div></div>';
return $submit_before . $submit_button . $submit_after;
};
add_filter( 'comment_form_submit_button', 'filter_comment_form_submit_button', 10, 2 );

Here you will get button submit function. here you will find 3 options like $submit_before, $submit_button, $submit_after.

So under this you can get all the codes. in the

$submit_after = Give all the code before you want to add on submit like:

$submit_before= '<div class="row"><div class="col-md-12">' (All the opening tags)
$submit_button = '<button type="submit" class="commentInputerBtn">submit <i class="fas fa-arrow-right"></i></button>'; (All the codes in the button directly)

$submit_after = '</div></div>'; (All the closing tags.)

So these all are the steps that if you follow you can customize your own comment template by functions.php.

To get this video watch it.

I hope it works in your template.

Thank you,

Happy Coding.