WordPress has own template to display post or page comments. But some times you want to change it with your own format. To do this, at first, we create comments.php in root folder of the theme.
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 comment form. In this code we tell the WordPress create 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 display the post comments. Display 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 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 display the body of the comment.
If you want move comment message field to the bottom of the comment form, add 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');
}