Create a funky most commented section for your blog!

Snaaazzzy!

After Engadget redesigned their website a few weeks ago, I noticed how their sidebar contained some unique methods of displaying posts. A nice featured posts section, a fancy calendar and an awesome most commented, digg and twitter section. Using the amount of comments to determine the width and having each post a different color to produce a rainbow, I thought was an awesome idea. So I had a go at making the most commented section for CreativityDen. It turned out pretty well, so I decided to share it with you! All credit goes to Code and Theory.

Colorful comment section

The colorful comment section developed and designed for wordpress blogs.

Colourful comments

Querying and displaying the most commented posts

The code is fairly simple. Firstly, it queries the database, finding the x most commented posts between two given dates. It then loops through the posts calculating the width and color of each post. I have tried to make the code as readable as possible, but if you have any problems do not hesitate to leave a comment. I am currently learning php myself so anyone who can improve this code, please share your improved version

My Version

My attempt is referred to as ’spaghetti code’ – don’t use it! Instead use Dylan’s improved version below mine. I shall leave my version up so you can see the mistakes I made and how Dylan cleaned my mess up.

<h2>Most commented</h2>

<ul id="most_commented">

<?php

#Fetch the five most commented posts between the 1st of January 2009 to the 31st of December 2009
$result = $wpdb->get_results("SELECT comment_count,ID,post_title, post_date FROM $wpdb->posts WHERE post_date BETWEEN '2009-01-01' AND '2009-12-31' ORDER BY comment_count DESC LIMIT 0 , 5");

#Declare counter variable
$i = 1;

#Loop through each post
foreach ($result as $topfive)
{
    $postid = $topfive->ID;
    $title = $topfive->post_title;
    $commentcount = $topfive->comment_count;

    #My hacky way of finding the number of comments on the most commented post
    if ($i == 1) {$mostcomments = $commentcount;}

    if ($commentcount != 0)
    {

    #Display our results
    echo '<li style="width:';
    #Determine the width for each post, the width of my sidebar was 260px, you will need to change this value to the width of sidebar (don't forget padding etc).
    echo round((260/$mostcomments)*$commentcount,1).'px; '; 

    #Change the color for each post - hex values - change these values to have different colors
    echo 'background-color:#';
    if ($i == 1) echo 'c32a2a';
    elseif ($i == 2) echo 'c37d2a';
    elseif ($i == 3) echo 'bac32a';
    elseif ($i == 4) echo '8fc32a';
    elseif ($i == 5) echo '4ec32a';

    echo ' ;"> ';

    #Display the post title with a link to the post
    echo '<a href=" ';
    echo get_permalink($postid);
    echo ' "> ';
    echo $title;
    echo '</a>';

    #Display the comment number
    echo '<div class="comment_no">';
    echo $commentcount;
    echo '</div></li>';

    }

$i++;

}

?>

</ul>

Dylan’s much improved version

<h2>Most commented</h2>

<ul id="most_commented">

<?php

# Fetch the five most commented posts in the last 12 months
$result = $wpdb->get_results("SELECT comment_count,ID,post_title, post_date FROM $wpdb->posts WHERE post_date BETWEEN NOW() AND DATE_SUB(NOW(), INTERVAL 12 MONTH) ORDER BY comment_count DESC LIMIT 5");

# Initialize $mostcomments
$mostcomments = FALSE;

# Initialize the colors.  Change these values to have different colours
$colors = array(
	'#c32a2a',
	'#c37d2a',
	'#bac32a',
	'#8fc32a',
	'#4ec32a');

#Loop through each post
foreach ($result as $i=>$topfive)
{
    $postid = $topfive->ID;
    $title = $topfive->post_title;
    $commentcount = $topfive->comment_count;

	# store the most comments in the first iteration, as a non-zero value evaluates to TRUE
	$mostcomments = ($mostcomments) ? $mostcomments : $commentcount;

    if ($commentcount != 0)
    {
		#Determine the width for each post, the width of my sidebar was 260px, you will need to change this value to the width of sidebar (don't forget padding etc).
		$width = round((260/$mostcomments)*$commentcount,1).'px; ';

		# use $i to correlate to an element in $colors rather than 5 if() statements
		$background_color = $colors[$i];

		# Get the permalink for this post
		$permalink = get_permalink($postid);

		# Use heredocs to output, to save on 1001 echo statements
		# Closing COUNT; is intentionally indented weird (see docs for why)
		echo <<<COUNT
			<li style = "width:$width;background-color:$background_color;">
				<a href = "$permalink">$title</a>
				<div class = "comment_no">$commentcount</div>
			</li>
COUNT;
    }
}

?>

</ul>

I decided to insert this code into my sidebar, however you can put it anywhere on your blog.

Add a little CSS

#most_commented a {
        color: #000;
        font-size: 14px;
}

#most_commented a:hover {
        color: #fff;
}

#most_commented li {
        position: relative;
        min-height: 40px;
        opacity: 0.9;
        margin: 0 0 -15px 0 !important;
        padding: 15px 10px 15px 10px !important;
}

#most_commented li .comment_no {
        position: absolute;
        top: 12px;
        right: -11px;
        padding: 5px;
        color: #efefef;
        background-color: #101010;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
}

Done! Easy as pie

Stay tuned! I plan on implementing this for most viewed posts and most tweeted/dugg posts

  

Written by Liam McCabe

The almighty creator of CreativityDen. Absolutely loves design and messing around with wordpress.