WordPress includes a powerful comments system that allows visitors to engage with you and other readers. Comments are essential for building a community, encouraging discussions, and creating interaction between you and your audience.
Even if you’re not a fan of leaving comments on other blogs, it’s likely that when you create your own WordPress site, you’ll want to receive feedback and appreciation from your readers. I try to respond to most comments promptly, and I’ve learned a lot from the comments you leave—thank you for that!
But let’s get to the point. Here’s a simple function that displays the latest comments on your blog without relying on a plugin.
Why avoid using a plugin? Plugins often come with extra functionality or assets (like JavaScript and CSS) that you don’t need, which can slow down your site.
They also tend to include assets (JavaScript & CSS files) that do not always match the visual or functional aspects of your site and can have a negative impact on the loading speed of your WordPress site.
Function to Display Latest Comments
Here is the function that allows you to display the latest comments of visitors on your WordPress site:
/**
* Show Recent Comments
*
* @author Roee Yossef
*
* @param string/integer $no_comments
* @param string/integer $comment_len
* @param string/integer $avatar_size
*
* @echo string $comm
*/
function sv_recent_comments($no_comments = 5, $comment_len = 100, $avatar_size = 66) {
$comments_query = new WP_Comment_Query();
$comments = $comments_query->query( array( 'number' => $no_comments ) );
$comm = '<div class="sv-recent-comments">';
if ( $comments ) : foreach ( $comments as $comment ) :
$comm .= '<li>' . get_avatar( $comment->comment_author_email, $avatar_size );
$comm .= '<a class="author" href="' . get_permalink( $comment->post_ID ) . '#comment-' . $comment->comment_ID . '">';
$comm .= get_comment_author( $comment->comment_ID ) . ':</a> ';
$comm .= '<p>' . strip_tags( mb_substr( apply_filters( 'get_comment_text', $comment->comment_content ), 0, $comment_len ) ) . '</p></li>';
endforeach; else :
$comm .= 'No Comments';
endif;
$comm .= '</div>';
echo $comm;
}
To add this function to your functions.php
file in your theme or more precisely, in the child theme of your WordPress site. Note that in the first line, you can set the number of comments to be displayed, the length of each comment (in letters), and the size of the Gravatar image for the commenters.
To use this code, you need to call the function wherever you want to display the recent comments on your blog. You can call the function like this:
sv_recent_comments();
Styling the Recent Comments Element
Now, you just need to style the recent comments, and for that, I added a class named sv-recent-comments
that you can use. You’ll need to take care of the styling, but here’s a simple CSS to start with:
.sv-recent-comments > li {
list-style-type: none;
}
.sv-recent-comments > li > a {
font-weight: 700;
}
.sv-recent-comments .avatar {
float: right;
clear: both;
margin-left: 20px;
}
I hope you find the function useful, and perhaps it would be nice to create a shortcode for this function so that you can easily use it and display recent comments in the WordPress widget area.