Sometimes you don’t like comment form in the WordPress website. It’s a common problem for many WordPress developers who newly developing their website. That’s why you need to change your comment form styles. On the other hand, some time you need to reduce some fields from your website comment fields. In this article, I will show you how to style customize your WordPress website comment form.
What is the best way to customize?
When you need little changes like some styles to add or replace, you can style those changes using CSS code inside the theme style sheet. It will save you a lot of time. By default, WordPress provides four fields in their functions. But, if you need to add more fields you can add using specific hooks or functions. If you haven’t enough knowledge about programming coding, you didn’t change their fields. So, be careful don’t edit any theme functional PHP files without coding knowledge. On the other hand, if you have enough knowledge about PHP coding, you can change comment form styles using default CSS class inside the comment fields. Now, you may be confused about how to change styles and what is the best way to do this. Don’t worry, if you have enough knowledge just use a child theme for change comment form styles. Note that, you can be change anything via child theme. This process is recommended by WordPress. You can know what is WordPress child theme and how it works. Let’s know about some process to change comment form styles.
Adding CSS codes
You can use the following CSS selectors to style your comment form. If you don’t have CSS knowledge you can get some knowledge from here.
#url { }
#comment
#submit
#respond { }
#reply-title { }
#commentform { }
#author { }
#email { }
.form-allowed-tags { }
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
#cancel-comment-reply-link { }
.comment-form-url { }
.comment-form-comment { }
.comment-form-cookies-consent { }
.form-submitIt’s is the primary process to change styles. Because of that, your styles will be reduced when your theme will get update. That’s why I’m not recommending this process.
Modifying a PHP function
Now go to your theme folder find out where using comment_form function. Because of that, WordPress showing comment form through this function. Normally, you can find this function in the single.php file. On the other hand, many developers it’s used in the comment.php file. So, search for this function. When you will find this function just open for edit. You may see multiple arguments in the function. If you’re just developing a new theme you can use some arguments for change styles. You will find all the arguments list here. Just use those arguments inside an array. If you want you can use own inputs using an associative array. You can use following codes for changing fields attributes.
$fields = array(
'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $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">' . __( 'Email' ) . ( $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">' . __( 'Website' ) . '</label> ' .
'<input id="url" name="url" ' . ( $html5 ? 'type="url"' : 'type="text"' ) . ' value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" maxlength="200" /></p>',
);Using child theme
If you’re very experienced about PHP programming I will recommend use child theme. If you don’t have knowledge about the child theme, you can read my article which I have described previously. So, create a child theme. Now, Use following code as example :
function move_comment_field_to_bottom( $fields ) {
$comment_field = $fields['comment'];
unset( $fields['comment'] );
$fields['comment'] = $comment_field;
return $fields;
}
add_filter( 'comment_form_fields', 'move_comment_field_to_bottom', 10, 1 );In the above codes, we have used a WordPress hook for change comment field order. You can modify comment fields using comment_form_fields hooks.
Conclusion
I have described multiple options for changing WordPress comment form styles. If you’re facing any problem with changing WordPress comment fields styles or any others, you can contact with me. I will try to do help you.
