Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Comment count bars
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" xml:lang="en" lang="en">
<title>Comment Count Bars</title>
<style type="text/css">
#most-commented {
width: 400px;
#most-commented li {
list-style: none;
#most-commented a {
display: block;
#most-commented .comment-bar {
display: inline-block;
position: relative;
height: 30px;
width: 0;
margin: 5px 0;
padding-left: 20px;
background-color: #999;
#most-commented .comment-count {
display: inline-block;
position: absolute;
right: -20px;
top: -5px;
width: 34px;
height: 34px;
border-width: 3px;
border-style: solid;
border-color: #FFF;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
text-align: center;
line-height: 34px;
background-color: #6CAC1F;
font-size: 13px;
font-weight: bold;
color: #FFF;
<ul id="most-commented">
<a href="#" rel="bookmark" title="">Post Title #1</a>
<span class="comment-bar"><span class="comment-count">258</span></span>
<a href="#" rel="bookmark" title="">Post Title #2</a>
<span class="comment-bar"><span class="comment-count">206</span></span>
<a href="#" rel="bookmark" title="">Post Title #3</a>
<span class="comment-bar"><span class="comment-count">144</span></span>
<a href="#" rel="bookmark" title="">Post Title #4</a>
<span class="comment-bar"><span class="comment-count">53</span></span>
*Note - this is a static example page. Use the included php snippet for WordPress implementations
<script type="text/javascript" src="
<script type="text/javascript">
$(function() {
// define global variables
var maxWidth, maxCount;
$('#most-commented li').each(function(i) {
var $this = $(this);
var thisCount = ~~$this.find('.comment-count').text();
// set up some variables if the first iteration
if ( i == 0 ) {
maxWidth = $this.width() - 40;
maxCount = thisCount;
// calculate the width based on the count ratio
var thisWidth = (thisCount / maxCount) * maxWidth;
// apply the width to the bar
width : thisWidth
}, 200, 'swing');
<ul id="most-commented">
<?php $most_commented = new WP_Query('orderby=comment_count&posts_per_page=5'); ?>
<?php while ($most_commented->have_posts()) : $most_commented->the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
<span class="comment-bar"><span class="comment-count"><?php comments_number('0','1','%'); ?></span></span>
<?php endwhile; ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment