Extending The Recent Comments Widget

This tutorial will show you how to extend the recent comments widget, to also include avatars and comment excerpts. You can insert the following code directly into functions.php.

1. Registering The Widget

First we want to register our widget, we are going to use the same name as WordPress’s default Recent Comments widget so it will modify it, rather than having two recent comment widgets on your widgets page.

add_action( 'widgets_init', 'recent_comments_widgets' );

function recent_comments_widgets() {
	register_widget('Recent_Comments');
}

class Recent_Comments extends WP_Widget {
	function Recent_Comments() {
		$widget_ops = array('classname' => 'recent_comments', 'description' => __('Displays recent comments with avatars and comment excerpts.'));
		$this->WP_Widget('recent-comments', __('Recent Comments'), $widget_ops);
	}

2. Adding The Widget Options

Next we want to register our widget options. Here I have created options to add a widget title and control the number of comments to display.

function widget($args, $instance) {
	extract($args);
	$title = apply_filters('widget_title', $instance['title']);
	$number = $instance['number'];

3. Displaying The Recent Comments

Now we are going to add the code which is actually outputted on your site. We start with echo $before_widget; and end with echo $after_widget;. In between these two parameters we will add our query that will find and display the most recent comments from your blog. Notice we have added $number rather than an actual number on the line ORDER BY comment_date DESC LIMIT $number" so that the you can change the number of comments from the widget options we created earlier. After the query we add our avatar and comment excerpt code which will be displayed on the site.

// Begin Widget
echo $before_widget;

if ($title) echo $before_title . $title . $after_title; ?>

<div id="recent-comments">

	<ul>

		<?php
		global $wpdb;
		$request = "SELECT * FROM $wpdb->comments";
		$request .= " JOIN $wpdb->posts ON ID = comment_post_ID";
		$request .= " WHERE comment_approved = '1' AND post_status = 'publish' AND post_password =''";
		$request .= " ORDER BY comment_date DESC LIMIT $number";
		$comments = $wpdb->get_results($request);
		if ($comments) { foreach ($comments as $comment) {
		ob_start(); ?>

			<li>

				<?php echo get_avatar($comment,$size='40'); ?>

				<div class="comment-excerpt">
					<a href="<?php echo get_permalink( $comment->comment_post_ID ) . '#comment-' . $comment->comment_ID; ?>"><?php echo strip_tags(substr(apply_filters('get_comment_text', $comment->comment_content), 0, 30)); ?>...</a>
					<br/><span class="comment-author"><?php echo($comment->comment_author) ?> <?php _e('on'); ?> <?php echo get_the_title($comment->comment_post_ID) ?></span>
				</div>

			</li>

		<?php ob_end_flush(); }} else { // If no comments ?>

			<li>No comments.</li>

		<?php } ?>

	</ul>

</div>

<?php echo $after_widget;
// End Widget

4. Displaying The Widget Options

We have already registered our widget options, now we are going to output them so you can see them in your brand new Recent Comments widget.

}

function update($new_instance, $old_instance) {
	$instance = $old_instance;
	$instance['title'] = strip_tags($new_instance['title']);
	$instance['number'] = strip_tags($new_instance['number']);
	return $instance;
}

function form( $instance ) {
	$defaults = array('title' => 'Recent Comments', 'number' => '5'); $instance = wp_parse_args((array) $instance, $defaults ); ?>

	<p>
		<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
		<br/><input class="widefat" type="text" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo $instance['title']; ?>" />
	</p>

	<p>
		<label for="<?php echo $this->get_field_id('number'); ?>"><?php _e('Number of Comments:'); ?></label>
		<input type="text" id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" size="3" value="<?php echo $instance['number']; ?>" />
	</p>

	<?php
}
}

?>

5. Styling The Widget

Finally you can insert the following code in style.css to style the widget:

#recent-comments {
width: 100%;
}

#recent-comments ul,
#recent-comments li {
width: 100%;
list-style-image: none;
list-style-type: none;
margin: 0;
padding: 0;
}

#recent-comments li {
margin-bottom: 15px;
}

#recent-comments .avatar {
float: left;
margin-right: 10px;
}

#recent-comments .comment-excerpt {
line-height: 19px;
}

#recent-comments .comment-author {
font-size: 11px;
}

If you just want to grab the widget code all in one piece you can download at the top of the page.

→   This item is free to use in commercial projects, no attribution necessary.