WordPress is one of the most popular content management systems in the world, and it’s widely used to create websites and blogs. One of the features that make WordPress so popular is its comment system, which allows visitors to leave comments on your posts and pages. While the default comment system is great for many websites, there are times when you may want to create a custom comment list to give it a unique look and feel in WordPress. In this article, we’ll discuss how to customize the comment list in WordPress.
WordPress has its own template to display posts or page comments. But sometimes you want to change it with your own format. To do this, first, we create comments.php in the theme’s root folder.
You’ll need to create a WordPress custom template for the comment list. You can do this by creating a file called “comments.php” in your WordPress theme folder. This file will contain the code that will be used to generate the comment list. You can use the default WordPress comment list template as a starting point, or you can create your own template from scratch.
Open the file and add the below code in it.
<?php
if (!defined('ABSPATH')) {
exit;
}
if (post_password_required()) {
return;
}
?>
<div id="comments" class="comments-area">
<?php
$comment_args = array(
'title_reply' => esc_html__('Leave a reply', 'text-domain'),
'fields' => apply_filters('comment_form_default_fields', array(
'author' => '<div class="comment-form-info"><p class="comment-form-author">' .
'<input id="author" name="author" placeholder="' . esc_html__('Name', 'text-domain') . ($req ? ' *' : '') . '" type="text" value="' . esc_attr($commenter['comment_author']) . '" size="30" /></p>',
'email' => '<p class="comment-form-email">' .
'<input id="email" name="email" placeholder="' . esc_html__('Email', 'text-domain') . ($req ? ' *' : '') . '" type="text" value="' . esc_attr($commenter['comment_author_email']) . '" size="30" />' . '</p></div>',
'url' => ''
)),
'comment_field' => '<p class="comment-form-comment">' .
'<textarea id="comment" placeholder="' . esc_html__('Write a Comment', 'text-domain') . ' *" name="comment" cols="45" aria-required="true"></textarea>' .
'</p>',
'comment_notes_after' => '',
'comment_notes_before' => '',
);
comment_form($comment_args);
?>
<?php if (have_comments()) { /* check the post has comment*/ ?>
<h3 class="comments-title">
<?php
$comments_number = get_comments_number(); ?>
<?php if ('0' === $comments_number) : ?>
<?php esc_html_e("0 Comment", 'text-domain') ?>
<?php elseif ('1' === $comments_number) : ?>
<?php esc_html_e("One Comment", 'text-domain') ?>
<?php else : ?>
<?php echo esc_html($comments_number); ?><?php esc_html_e(" Comments", 'text-domain') ?>
<?php endif; ?>
<span></span>
</h3>
<ul class="comment-list">
<?php
wp_list_comments(
array(
'short_ping' => true,
'avatar_size' => 70,
'callback' => 'hs_zolog_custom_comment_list'
)
);
?>
</ul>
<div class="comment-pagination">
<?php paginate_comments_links(array('prev_text' => __('<i class="fa fa-angle-left"></i>', 'text-domain'), 'next_text' => __('<i class="fa fa-angle-right"></i>', 'text-domain'))); ?>
</div>
<?php }
?>
</div>The first section of the code is about the comment form. In this code, we tell WordPress to create a comment form with our own format, not the default one.
<?php
$comment_args = array(
'title_reply' => esc_html__('Leave a reply', 'text-domain'),
'fields' => apply_filters('comment_form_default_fields', array(
'author' => '<div class="comment-form-info"><p class="comment-form-author">' .
'<input id="author" name="author" placeholder="' . esc_html__('Name', 'text-domain') . ($req ? ' *' : '') . '" type="text" value="' . esc_attr($commenter['comment_author']) . '" size="30" /></p>',
'email' => '<p class="comment-form-email">' .
'<input id="email" name="email" placeholder="' . esc_html__('Email', 'text-domain') . ($req ? ' *' : '') . '" type="text" value="' . esc_attr($commenter['comment_author_email']) . '" size="30" />' . '</p></div>',
'url' => ''
)),
'comment_field' => '<p class="comment-form-comment">' .
'<textarea id="comment" placeholder="' . esc_html__('Write a Comment', 'text-domain') . ' *" name="comment" cols="45" aria-required="true"></textarea>' .
'</p>',
'comment_notes_after' => '',
'comment_notes_before' => '',
);
comment_form($comment_args);
?>In the second section, we tell the WordPress that displays the post comments. Display the number of comments and the comments.
wp_list_comments(
array(
'short_ping' => true,
'avatar_size' => 70,
'callback' => 'hs_custom_comment_list'
)
);In this code, we tell the WordPress core that we will use our own function ( hs_custom_comment_list ) to display the format of the comments list.
Open the functions.php file and add the body of the function in it.
function hs_custom_comment_list($comment, $args, $depth)
{ ?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
<div id="div-comment-<?php comment_ID(); ?>" class="comment-body">
<?php
if (0 != $args['avatar_size']) :
$avatar = get_avatar($comment, $args['avatar_size']);
if ($avatar) {
?>
<div class="avatar">
<?php echo get_avatar($comment, $args['avatar_size']); ?>
</div>
<?php }
endif; ?>
<div class="comment-author">
<div class="comment-metadata">
<div class="name">
<?php echo wp_kses(get_comment_author_link(), array('a' => array('href' => array()))); ?>
</div>
<div class="comment-reply">
<?php comment_reply_link(array_merge($args, array('add_below' => 'div-comment', 'class' => '', 'depth' => $depth, 'max_depth' => $args['max_depth']))); ?>
</div>
</div>
<div class="comment-date">
<a href="<?php echo esc_url(get_comment_link($comment->comment_ID)); ?>">
<?php
$time_string = '<span class="date"><time class="entry-date published updated" datetime="%1$s">%2$s</time></span>';
$time_string = sprintf(
$time_string,
esc_attr(get_comment_date(DATE_W3C)),
esc_html(get_comment_date("j M, Y"))
);
echo wp_kses_post($time_string); ?>
</a>
<?php edit_comment_link(esc_html__('(Edit)', 'text-domain'), '<span class="edit-link">', '</span>'); ?>
</div>
<div class="comment-content entry-content">
<?php comment_text(); ?>
</div>
</div>
</div>
<div class="comment-footer">
<?php if ('0' == $comment->comment_approved) : ?>
<p class="comment-awaiting-moderation"><?php esc_html_e('Your comment is awaiting moderation.', 'text-domain'); ?></p>
<?php endif; ?>
</div>
<?php
}This function displays the body of the comment.
If you want to move the comment message field to the bottom of the comment form, add the below code in the functions.php file.
if (!function_exists('hs_move_comment_field_to_bottom')) {
function hs_move_comment_field_to_bottom($fields)
{
$comment_field = $fields['comment'];
unset($fields['comment']);
$fields['comment'] = $comment_field;
return $fields;
}
add_filter('comment_form_fields', 'hs_move_comment_field_to_bottom');
}
