Search

Displaying Recent Comments in WordPress Without a Plugin

WordPress comes with a robust comments mechanism that allows visitors to communicate with you and other readers on the site. These comments play a crucial role in building a community around your blog. They enable readers to participate in discussions, creating a kind of reciprocal relationship and interaction between you and the readers on your blog.

Even if you don’t like leaving comments on other blogs, it’s reasonable to assume that once you build a WordPress site or blog, you’ll want to receive comments, appreciation, and even feedback from readers, whether positive or negative, on your blog posts. Perhaps it’s also time to thank all the readers and commenters on this blog, so thank you 🙂 As you may notice, I try to respond to most of your comments as quickly as possible.

I’m also learning a lot from the comments you leave, so again, thank you, and I’d be happy if you continue to do so.

But not for thanks did you come to this short post. Let’s see a short function that allows you to display the latest comments of readers on the blog wherever you want without using a plugin.

Why do this without a plugin? In short – plugins and additional code generally, and I’m not talking about plugins you develop, often include functionality that may not be necessary for you, thus adding unnecessary code that is not relevant to you.

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.

Roee Yossef
Roee Yossef

I develop websites & custom WordPress themes by design. I love typography, colors & everything between, and aim to provide high performance, seo optimized websites with a clean & semantic code.

0 Comments...

Leave a Comment

Up!
Blog