How to Style and Customize WordPress Comment Form? Plus, Modify appearance of Comments with CSS
comment_form() outputs a complete commenting form for use within a WordPress template.
Most strings and form fields may be controlled through the $args array passed into the function, while you may also choose to use the comment_form_default_fields filter to modify the array of default fields if you’d just like to add a new one or remove a single field.
All fields are also individually passed through a filter of the form comment_form_field_$name where $name is the key used in the array of fields.
The WordPress 3.0+ function – comment_form() has 2 parameters that can be optionally modified to your liking.
Here is the example arguments that can be used:
<?php comment_form($args, $post_id); ?>
$args:This contains our options for our strings and fields within the form and etc.$post_id:Post ID is used to generate the form, if null it will use the current post.
I’ve today modified comment form and added some CSS and noticed very big difference in my comment form.
Would like to share my changes with you.
Let’s get started:
Method-1) Using functions.php file – only for Genesis
- Go to
Appearance - Click
Editor - Open
functions.phpfile and put below code.
This is what I do have on Crunchify as I’m using Genesis WordPress framework theme.
// Modify comments header text in comments
add_filter( 'genesis_title_comments', 'child_title_comments');
function child_title_comments() {
return __(comments_number( '<h3>No Responses</h3>', '<h3>1 Response</h3>', '<h3>% Responses...</h3>' ), 'genesis');
}
// Unset URL from comment form
function crunchify_move_comment_form_below( $fields ) {
$comment_field = $fields['comment'];
unset( $fields['comment'] );
$fields['comment'] = $comment_field;
return $fields;
}
add_filter( 'comment_form_fields', 'crunchify_move_comment_form_below' );
// Add placeholder for Name and Email
function modify_comment_form_fields($fields){
$fields['author'] = '<p class="comment-form-author">' . '<input id="author" placeholder="Your Name (No Keywords)" name="author" type="text" value="' .
esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' />'.
'<label for="author">' . __( 'Your Name' ) . '</label> ' .
( $req ? '<span class="required">*</span>' : '' ) .
'</p>';
$fields['email'] = '<p class="comment-form-email">' . '<input id="email" placeholder="your-real-email@example.com" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) .
'" size="30"' . $aria_req . ' />' .
'<label for="email">' . __( 'Your Email' ) . '</label> ' .
( $req ? '<span class="required">*</span>' : '' )
.
'</p>';
$fields['url'] = '<p class="comment-form-url">' .
'<input id="url" name="url" placeholder="http://your-site-name.com" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /> ' .
'<label for="url">' . __( 'Website', 'domainreference' ) . '</label>' .
'</p>';
return $fields;
}
add_filter('comment_form_default_fields','modify_comment_form_fields');
Method-2) For any other WordPress theme
Just open comments.php file and replace $args with below code to beautify comment code with placeholders.
$args = array(
'fields' => apply_filters(
'comment_form_default_fields', array(
'author' =>'<p class="comment-form-author">' . '<input id="author" placeholder="Your Name (No Keywords)" name="author" type="text" value="' .
esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' />'.
'<label for="author">' . __( 'Your Name' ) . '</label> ' .
( $req ? '<span class="required">*</span>' : '' ) .
'</p>'
,
'email' => '<p class="comment-form-email">' . '<input id="email" placeholder="your-real-email@example.com" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) .
'" size="30"' . $aria_req . ' />' .
'<label for="email">' . __( 'Your Email' ) . '</label> ' .
( $req ? '<span class="required">*</span>' : '' )
.
'</p>',
'url' => '<p class="comment-form-url">' .
'<input id="url" name="url" placeholder="http://your-site-name.com" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /> ' .
'<label for="url">' . __( 'Website', 'domainreference' ) . '</label>' .
'</p>'
)
),
'comment_field' => '<p class="comment-form-comment">' .
'<label for="comment">' . __( 'Let us know what you have to say:' ) . '</label>' .
'<textarea id="comment" name="comment" placeholder="Express your thoughts, idea or write a feedback by clicking here & start an awesome comment" cols="45" rows="8" aria-required="true"></textarea>' .
'</p>',
'comment_notes_after' => '',
'title_reply' => '<div class="crunchify-text"> <h5>Please Post Your Comments & Reviews</h5></div>'
);
To customize comment form, you can use any HTML tags/elements as you can see I’ve placed extra placeholder html tag above.
Comment form – Before:
Comment form – After:
There are number of different ways you could modify comment form. Just keep adding different texts and html Styles to modify it.
Now what? Do you want to modify CSS with below look and feel?
If you want to modify CSS of your comment form then here is a handy code which you could add to your theme’s style.css file.
/* ## Comments
--------------------------------------------- */
.comment-respond,
.entry-pings,
.entry-comments {
color: #444;
padding: 20px 45px 40px 45px;
border: 1px solid #ccc;
overflow: hidden;
background: #fff;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
border-left: 4px solid #444;
}
.entry-comments h3{
font-size: 30px;
margin-bottom: 30px;
}
.comment-respond h3,
.entry-pings h3{
font-size: 20px;
margin-bottom: 30px;
}
.comment-respond {
padding-bottom: 5%;
margin: 20px 1px 20px 1px;
border-left: none !important;
}
.comment-header {
color: #adaeb3;
font-size: 14px;
margin-bottom: 20px;
}
.comment-header cite a {
border: none;
font-style: normal;
font-size: 16px;
font-weight: bold;
}
.comment-header .comment-meta a {
border: none;
color: #adaeb3;
}
li.comment {
background-color: #fff;
border-right: none;
}
.comment-content {
clear: both;
overflow: hidden;
}
.comment-list li {
font-size: 14px;
padding: 20px 30px 20px 50px;
}
.comment-list .children {
margin-top: 40px;
border: 1px solid #ccc;
}
.comment-list li li {
background-color: #f5f5f6;
}
.comment-list li li li {
background-color: #fff;
}
.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] {
width: 50%;
}
.comment-respond label {
display: block;
margin-right: 12px;
}
.entry-comments .comment-author {
margin-bottom: 0;
position: relative;
}
.entry-comments .comment-author img {
border-radius: 50%;
border: 5px solid #fff;
left: -80px;
top: -5px;
position: absolute;
width: 60px;
}
.entry-pings .reply {
display: none;
}
.bypostauthor {
}
.form-allowed-tags {
background-color: #f5f5f5;
font-size: 16px;
padding: 24px;
}
.comment-reply-link{
cursor: pointer;
background-color: #444;
border: none;
border-radius: 3px;
color: #fff;
font-size: 12px;
font-weight: 300;
letter-spacing: 1px;
padding: 4px 10px 4px;
text-transform: uppercase;
width: auto;
}
.comment-reply-link:hover{
color: #fff;
}
.comment-notes{
display:none;
}
We are using currently Disqus comment plugin. So far we like it & will continue to use it.
The post How to Style and Customize WordPress Comment Form? Plus, Modify appearance of Comments with CSS appeared first on Crunchify.
Leave a Reply