Advertisement
Creative Coding

Customizing Comments in WordPress - Functionality and Appearance

by

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_before and comment_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>&darr;</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.

Related Posts
  • Code
    Creative Coding
    Using the Included Password Strength Meter Script in WordPressPassword meter 400
    WordPress uses a pretty nifty password strength script that is used to display whether the passwords you entered in the WordPress admin are: not the same, very weak, weak, medium or strong. Currently this script is only used when creating creating new users and when changing your password in your admin. In this article, I will be teaching you on how to use the WordPress' password strength meter in your own forms.Read More…
  • Code
    Theme Development
    Custom Controls in the Theme CustomizerTheme customizer custom control 400
    In the last article, we explored the advanced controls available in the Theme Customizer, and how to implement them. We’re going to look at how to create our own custom control, allowing you to choose which Category of Posts are displayed on the home page. To get started, download version 0.6.0 of our Theme Customizer Example.Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    PHP
    Authentication With Laravel 4Laravel 4 auth retina preview
    Authentication is required for virtually any type of web application. In this tutorial, I'd like to show you how you can go about creating a small authentication application using Laravel 4. We'll start from the very beginning by creating our Laravel app using composer, creating the database, loading in the Twitter Bootstrap, creating a main layout, registering users, logging in and out, and protecting routes using filters. We've got a lot of code to cover, so let's get started!Read More…
  • Code
    Plugins
    A Better Forum List Widget for bbPressBbpress
    When bbPress was still a standalone installation, I had tried it out and wasn't really impressed. Things were clunky and it didn't always work the way it was supposed to. After languishing for a few years, Automattic decided to take bbpress and turn it into a plugin, improving the functionality leaps and bounds and making it a strong contender amongst other forum option for WordPress.Read More…
  • Code
    Plugins
    How to Create a WordPress Avatar Management Plugin from Scratch: Getting StartedPreview
    Avatar Manager for WordPress is a sweet and simple plugin for storing avatars locally and more. Easily. Enhance your WordPress website by letting your users choose between using Gravatar or a self-hosted avatar image right from their profile screen. Improved workflow, on-demand image generation and custom user permissions under a native interface. Say hello to the Avatar Manager plugin.Read More…