Paintbits

How to: Recent Comments without Plugin

In the ongoing creation process of the new Paintbits theme (Lumen v2), I was researching a way to implement some functionality to my footer, but without the use of plugins. One of the features I want displayed in it it’s some recent comments by the users. I found some solutions, but none satisfied my needs completely.

With the help of the WordPress default files and the WordPress Codex and some PHP I ended up with a little code snippet that do exactly what I want: A certain amount of recent comments, filtering the tracbacks and pingbacks, with a preview of the comment when hovering over the link.

The code is fairly simple.

The Code

<div class="footer_recent_comments">
<h2>Recent Comments</h2>
<ul>

< ?php
  $comments = get_comments('number=10&amp;amp;status=approve');

  $true_comment_count = 0;

  foreach($comments as $comment) :
?>

< ?php $comment_type = get_comment_type(); ?>
< ?php if($comment_type == 'comment') { ?>

< ?php $true_comment_count = $true_comment_count +1; ?>

< ?php $comm_title = get_the_title($comment->comment_post_ID);?>
< ?php $comm_link = get_comment_link($comment->comment_ID);?>
< ?php $comm_comm_temp = get_comment($comment->comment_ID,ARRAY_A);?>
< ?php $comm_content = $comm_comm_temp['comment_content'];?>

<li><span class="footer_comm_author">< ?php echo($comment->comment_author)?></span> on <a href="<?php echo($comm_link)?>" title="< ?php comment_excerpt(); ?>"> < ?php echo $comm_title?> </a>
</li> 

< ?php } ?>

< ?php if($true_comment_count == 5) {break;} ?>
< ?php endforeach;?>

</ul>
</div>

The code is surrounded by a div with the class .footer_recent_comments so you can style and position the output in your footer / sidebar or wherever you want to place it.

If you want to increase the number of comments displayed, you will need to change the variable true_comment_count == 5 to the value you want, and at the top of the code get_comments(‘number=10&status=approve’); to a number bigger than the number of comments you want. Why? Because the get_comments fetches for example 10 comments, but some of these might be trackbacks and we don’t want to display those. So within the loop we will each comment to see if they’re a real comment. If that’s the case we will display it, if not we ignore it, when we reach the number of “true” comments we want in the 10 we’ve read from the database, in this example that’s 5, we will interrupt the cycle and display the comments. I hope this is clear to you.

Just as an example, I’ll show you the CSS code I’ve used, to style the Recent Comments code I’m using in the footer.

The CSS Code

#footer
{
clear: both;
width: 1022px;
height: 230px;
background: url("images/footer_bg.jpg") repeat-y;
display:block;
}

#footer-content
{
clear:both;
padding: 25px 0;
margin: 0 31px 0 31px;
color: #7b7b7b;
}

#footer-content a, #footer-content a:visited
{
color: #7b7b7b;
}

#footer-content a:hover
{
color: #0592f4;
}

#footer-content div {
margin: 0 0 0 20px;
float: left;
}

#footer-content h2
{
font-family: Arial, Verdana, Helvetica;
font-size: 1.3em;
color:#efefef;
line-height: 1.1em;
letter-spacing: 1px;
padding: 0px 10px 10px 0;
margin: 0px 0 0 0;
}

#footer-content ul
{
text-align: left;
padding: 0 0 0 0;
}

#footer-content ul li
{
list-style: none;
padding: 5px 0 5px 20px;
margin: 0;
border-bottom: 1px solid #242424;
background: url("images/bullet_go_blue.png") left center no-repeat;
line-height:14px;
}

#footer-content ul li:hover
{
background: #121212 url("images/bullet_go_purple.png") left center no-repeat;
}

#footer-content ul li a
{
font-size: 1.0em;
}

#footer-content .footer_recent_comments
{
float: left;
width: 290px;
height:100%;
}

#footer-content .footer_comm_author
{
font-weight:bold;
color:#aaaaaa;
}

Hope this little bits of code can help you in some way in your present or future blogging endeavourers. You can see it in action on my footer.

17 Comments