24Mar
12 Comments
Display recent comments with Gravatars – No Plugin | Wordpress Wednesday #1
In this week’s tutorial we’ll show you how to display recent comments with their corresponding Gravatar. We’ll also explain how you can use a custom image, for when the commenter has no Gravatar – without a plugin. The code used in this post is very similar to the recent comment section on this site.
Look through the steps or skip straight to the code.
Step 1: Find the comments
We use the Wordpress function ‘get_comments()’ to find any comments that are avaliable and store them in an array, ready for us to process. We also throw in a few parameters to make sure we only show 5 comments and they are all approved. Any comments are stored in a variable called ‘comments’.
<?php
$comments = get_comments('status=approve&number=5');
Step 2: Were we able to retrieve any comments?
We have our results in a variable (hopefully). Before we can loop through the comments and display them, we must check they exist.
$if ($comments) {
// If there are comments, code to display them here.
}
else {
// If there are no comments, this code will display.
}
Step 3: Filling in the ‘IF’ statement
Now your code has decided whether or not you have any comments it needs to display something. Below is the IF and ELSE statement, updated.
if ($comments) {
echo '<ul id="recent_comments">';
foreach ($comments as $comment) {
echo '<li><a href="'. get_permalink($comment->comment_post_ID).'#comment-'.$comment->comment_ID .'" title="'.$comment->comment_author .' | '.get_the_title($comment->comment_post_ID).'">' . get_avatar( $comment->comment_author_email, $img_w);
echo '<span class="recent_comment_name">' . $comment->comment_author . ': </span>';
$comment_string = $comment->comment_content;
$comment_excerpt = substr($comment_string,0,100);
echo $comment_excerpt;
if (strlen($comment_excerpt) > 99){
echo ' ...';
}
echo '</a></li>';
}
echo '</ul>';
}
else{
echo '<ul id="recent_comments">
<li>No Comments Yet</li>
</ul>';
}
The above goes something like this…
- For each comment, create a new list item, make the information inside the list a link. The link will contain the location and the title information of the comment.
- Display the Gravatar that matches the submitted email address.
- Create a span, wrap the comment author text in the span (we use this to make the author a different colour).
- In this case, we don’t want all of the comment text to be displayed, especially if it is a long comment. To fix this problem, we store the comment text in to a variable named $comment_string’ then we process that variable and a string 100 characters long is stored in the variable $comment_excerpt’
- ‘Echo’ the newly created excerpt.
- If the excerpt is longer than 99 characters, this indicates the whole comment could not be shown and we show that by adding ‘…’ to the end of the excerpt.
- Close open elements.
- If there are no comments make a simple unordered list which displays a text indicating no comments.
Step 4: Adding a custom default avatar.
If the commenter does not have a Gravatar, the code will fall back on the default Wordpress avatar – a bit boring. Add the code below to your functions.php file and this will insert your custom avatar into Wordpress Settings -> Discussion, allowing you to select it.
<?php
add_filter( 'avatar_defaults', 'newgravatar' );
function newgravatar ($avatar_defaults) {
$myavatar = get_bloginfo('template_directory') . '/images/YOUR_IMAGE_HERE.png';
$avatar_defaults[$myavatar] = "Custom Gravatar";
return $avatar_defaults;
}
?>
Final comments and code
We use this block of code inside sidebar.php to display 5 most recent comments with their corresponding Gravatars, feel free to move it to another template file.
<?php
$comments = get_comments('status=approve&number=5');
if ($comments) {
echo '<ul id="recent_comments">';
foreach ($comments as $comment) {
echo '<li><a href="'. get_permalink($comment->comment_post_ID).'#comment-'.$comment->comment_ID .'" title="'.$comment->comment_author .' | '.get_the_title($comment->comment_post_ID).'">' . get_avatar( $comment->comment_author_email, $img_w);
echo '<span class="recent_comment_name">' . $comment->comment_author . ': </span>';
$comment_string = $comment->comment_content;
$comment_excerpt = substr($comment_string,0,100);
echo $comment_excerpt;
if (strlen($comment_excerpt) > 99){
echo ' ...';
}
echo '</a></li>';
}
echo '</ul>';
}
else{
echo '<ul id="recent_comments">
<li>No Comments Yet</li>
</ul>';
}
?>
The block below displays a custom Gravatar within your Wordpress settings, it must sit in your themes functions.php file.
<?php
add_filter( 'avatar_defaults', 'newgravatar' );
function newgravatar ($avatar_defaults) {
$myavatar = get_bloginfo('template_directory') . '/images/YOUR_IMAGE_HERE.png';
$avatar_defaults[$myavatar] = "Custom Gravatar";
return $avatar_defaults;
}
?>
Don’t forget to get the code working before you start chopping it to pieces :). If you have any questions please reply below.
12 Comments
Instead of using the direct DB query you should use the WordPress core function get_comments() to get the recent comments data.
Thanks Joseph, I have updated the post with your suggestion.
Thank you for this post !
Great post! Helped me alot in my college assignement. Thanks for your information.
Hello Fuzeo! I have installed your code in my sidebar.php but it’s not working. Can you give me the full code with tag. Thank you!
Hi there, thanks for informing us! It is appreciated. We have updated it and a cut and paste job should now do the trick!
Anymore problems please do let us know.
Thanks :)
Now it’s work fine. Thank you very much Fuzeo! ;)
How would I show comments from one specific post only? Or maybe from a specific category only?
Thank-you
Hi Richard,
To show comments from a specific post, at Step 1, add
&post_id=[id]inside the brackets. So…$comments = get_comments('status=approve&number=5&post_id=[id]');, where[id]is the numerical id of the post (without the square brackets).Check out the WP codex for more on the get_comments function.
If you set the image to
display:blockand give it a height and width, you’ll be able to float it to the side of the comment text.Let us know if you’ve any more questions & how you get on :)
Forgot to ask … Having trouble aligning the avatar to the left of the text. Is there a class I can use to float:left; ?
Thanks for the reply on selecting a post. Yes, that addition works perfectly if I want to show comments from just one ID. Then I tried to exclude a post ID by using post_id=-223′) using the minus, but this does not work. Any ideas why?
Thanks
This is so great!
Thanks for sharing the codes, I hope I can do it well.
Trackbacks & pingbacks
[...] original here: Wordpress Wednesday #1: Display recent comments with Gravatars – No Plugin – Fuzeo Tags: gravatars, [...]
[...] etc), am decis să scriu acest mini-articol. Iar ca să nu reinventez roata, am transformat un snippet scris de un blogger strain, într-o funcţie.. ce poate fi apelată mai uşor oriunde în [...]
Leave your reply