In WordPress there are different content types like post, page and comments etc. These form the very basics of WordPress. WordPress being a highly customizable platform lets you customize the very basic types to a great extent to suit your site. One can change the look as well as the functionality of the basic types to make them behave and look as per the appearance and functionality of your site. In this article we are going to see how we can change the behavior and appearance of the comments in our WordPress site.
Step 1 Understanding the comment_form Function and Its Arguments
Let's have a look at the WordPress function comment_form. This is responsible for showing the comments form which is mostly displayed on the single page or post in WordPress. A call to this function will be mostly seen in the comments.php file of your theme folder. Then this file would be included at various places like single.php, page.php, etc. directly or by calling the comments_template function.
You can find more details about comments_template in the WordPress Codex.
If we use the comment_form function to display the form, the form will be displayed using the default parameters which will be fields such as name, email (both are compulsory), website and the comment content. On the Twenty Eleven default theme the form will look as follows.
Some of the important arguments to the comment_form function are:
-
fields– By which you can actually control which fields are shown in the comment form. -
comment_notes_beforeandcomment_notes_after– These are used to display some note before or after the comment form. -
title_reply– Using this you can change the title of the reply which by default is 'Leave a Reply'. -
label_submit– This can be used to change the text over the submit button of the comment.
Step 2 Customizing Your Comment Form Using the Function comment_form
Now let's customize our comment form by passing different arguments to comment_form.
In case we want to customize the fields of the comment form we can pass the fields to the comment_form function. The default fields in the comment_form function are as follows:
$fields = array( 'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<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' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<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>', );
So in case we want to remove the website field then we need to create the fields without the website field as follows and pass it to the comment_form.
$commenter = wp_get_current_commenter(); $req = get_option( 'require_name_email' ); $aria_req = ( $req ? " aria-required='true'" : '' ); $fields = array( 'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<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' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<input id="email" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>', ); $comments_args = array( 'fields' => $fields ); comment_form($comments_args);
Now if we go and see the comments form it will appear as follows:
In addition to this let's now change the title of reply to 'Please give us your valuable comment' and also change the comment post button title to 'Send My Comment'.
Following are the arguments we will pass to comment_form to achieve this:
$commenter = wp_get_current_commenter(); $req = get_option( 'require_name_email' ); $aria_req = ( $req ? " aria-required='true'" : '' ); $fields = array( 'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<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' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<input id="email" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>', ); $comments_args = array( 'fields' => $fields, 'title_reply'=>'Please give us your valuable comment', 'label_submit' => 'Send My Comment' ); comment_form($comments_args);
Now if we see the comment form it will look as follows:
Step 3 Removing Fields From the Comment for Using Hooks
The WordPress comments form can be customized also using hooks and filters. Customizing using hooks/filters is very useful especially when you are customizing through a plugin and cannot modify the theme files. The filter to add or remove fields from the comments form is 'comment_form_default_fields'
Now let's remove the URL field using this filter. The code to do this you can either put it in your plugin file if you are customizing through the plugin or in the functions.php file of your theme.
The code is as follows:
function remove_comment_fields($fields) {
unset($fields['url']);
return $fields;
}
add_filter('comment_form_default_fields','remove_comment_fields');
In this we add the function remove_comment_fields on the 'comment_form_default_fields' filter and then unset the url field to remove the website field.
Step 4 Adding More Data to Your Comments Using Hooks
We can even add fields to the comment for using the 'comment_form_default_fields' filter. Now let's add a comment author's age field using this filter and then store this field as a comment meta and display it on the comment.
We can add a field as follows:
function add_comment_fields($fields) {
$fields['age'] = '<p class="comment-form-age"><label for="age">' . __( 'Age' ) . '</label>' .
'<input id="age" name="age" type="text" size="30" /></p>';
return $fields;
}
add_filter('comment_form_default_fields','add_comment_fields');
Once we add the field depending on the theme we might want to style it. As I am using the Twenty Eleven theme I style it by adding #respond .comment-form-age label with the other labels style like #respond .comment-form-url label etc. as follows:
#respond .comment-form-author label,
#respond .comment-form-email label,
#respond .comment-form-url label,
#respond .comment-form-age label,
#respond .comment-form-comment label {
background: #eee;
-webkit-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
-moz-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
color: #555;
display: inline-block;
font-size: 13px;
left: 4px;
min-width: 60px;
padding: 4px 10px;
position: relative;
top: 40px;
z-index: 1;
}
Now if we see the comment form the age field will be seen as follows:
Now that the age is stored as the comment meta we need to hook into 'comment_post' and save the age as comment meta as follows:
function add_comment_meta_values($comment_id) {
if(isset($_POST['age'])) {
$age = wp_filter_nohtml_kses($_POST['age']);
add_comment_meta($comment_id, 'age', $age, false);
}
}
add_action ('comment_post', 'add_comment_meta_values', 1);
Once the meta is saved it can be displayed on the comment as follows:
<?php echo "Comment authors age: ".get_comment_meta( $comment->comment_ID, 'age', true ); ?>
Step 5 Customizing Comments for Some Specific Post Types
It might be sometimes useful to have some comment fields only for specific post types. Now lets make code changes to display the age comment field only if it's a custom post type, like say, book.
The code to have the age only for books custom post type is:
function add_comment_fields($fields) {
if( is_singular( 'books' ) ) {
$fields['age'] = '<p class="comment-form-age"><label for="age">' . __( 'Age' ) . '</label>' .
'<input id="age" name="age" type="text" size="30" /></p>';
}
return $fields;
}
add_filter('comment_form_default_fields','add_comment_fields');
So here you add the field only if it is of type 'Books'.
Step 6 Creating a Callback for Displaying Comments
The function wp_list_comments is used to display the comments on a post. You can read about wp_list_comments in the WordPress Codex.
wp_list_comments has an argument of 'callback' in which you can specify the function to be called back to display the comment.
In the Twenty Eleven theme in comments.php you will see a line:
wp_list_comments( array( 'callback' => 'twentyeleven_comment' ) );
This we will change to:
wp_list_comments( array( 'callback' => 'my_comments_callback' ) );
So the function my_comments_callback will be called for each post.
Step 7 Styling Your Comments
Now we will style our post a little differently. We just want to display the content of the post and the age field which we have specifically added. We change the background color of the comments also.
The code for function 'my_comments_callback' is as follows:
function my_comments_callback( $comment, $args, $depth ) {
$GLOBALS['comment'] = $comment;
?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
<article id="comment-<?php comment_ID(); ?>" class="comment">
<div class="comment-content"><?php comment_text(); ?></div>
<p><?php echo "Comment authors age: ".get_comment_meta( $comment->comment_ID, 'age', true ); ?></p>
<div class="reply">
<?php comment_reply_link( array_merge( $args, array( 'reply_text' => __( 'Reply <span>↓</span>', 'twentyeleven' ), 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
</div>
</article>
</li>
<?php
}
We also modify the background color as follows:
.commentlist > li.comment {
background: #99ccff;
border: 3px solid #ddd;
-moz-border-radius: 3px;
border-radius: 3px;
margin: 0 0 1.625em;
padding: 1.625em;
position: relative;
}
Now if we see the comments they will look as follows:
Conclusion
Comments play an important role as one is building a community site. Depending on the site the functionality of the comments can also be customized appropriately. WordPress provides a flexible commenting system and provides a good support via functions to change the behavior and appearance of the comments of your site. So have fun customizing your WordPress site!
Let us know in the comments below if you have any other suggestions for how to customize comments on your WordPress site.
Comments