WordPress Comment Counter

  • follow us in feedly
Published March 22, 2013 by Brad Knutson
WordPress Comment Counter

There are tons of social media share buttons out there with counters these days, so much so that the format has become pretty popular and translated to other “counter” worthy queries.

I’ve seen a few sites use comment counters, some cool and some not-so-cool. This got me to thinking about creating my own. I drew inspiration from the social media share buttons with the floating counters.

Preview of the finished product


As you can see, this mirrors the design of the various social media share plugins that have vertical counters. I have chosen not to link up my button for this demonstration, but you can link it to bring your visitors to the comments section of your website if you’d like.

There are a few ways we can implement this. We can insert the code directly into our page template, or we can create a WordPress shortcode. Let’s start by going over the structure and style.


<div class="comments-counter-container">
<div class="comments-counter">
		// number goes here
<div class="comments-button">


.comments-counter-container {
	width: 57px;
.comments-counter {
	width: 57px;
	height: 40px;
	text-align: center;
	line-height: 2.5;
	background-image: url('images/comments_counter.png');
.comments-button {
	width: 57px;
	height: 22px;
	background-image: url('images/comments_initial.png');
	border-radius: 3px;
	box-shadow: 0px 1px 4px rgba(0,0,0,0.2);
	margin-top: 2px;
.comments-button:hover {
	background-image: url('images/comments_hover.png');

First, I’ll go over the WordPress shortcode that I created for this. For both the shortcode and inserting the code into the page template, we’ll use the get_comments_number() function to get the number of posts for the current page.


Add the code below to the bottom of your theme’s functions.php file.

function comments_count_shortcode() {
	$count = get_comments_number();
	$comments_count = '<div class="comments-counter-container">
<div class="comments-counter">';
	$comments_count .= $count;
	$comments_count .= '</div>';
	$comments_count .= '<div class="comments-button"></div>
	return $comments_count;
add_shortcode('comments_count', 'comments_count_shortcode');

Directly into the page template

You can add the below chunk of code to any page template you want.

<?php $count = get_comments_number(); ?>
<div class="comments-counter-container">
<div class="comments-counter">
		<?php echo $count; ?>
<div class="comments-button">

The Result


Of course you can choose to style the button however you’d like, but that’s all there is to it.

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date



See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

5 thoughts on “WordPress Comment Counter

    1. Brad Knutson Post author


      I haven’t considered that, but it wouldn’t be terribly difficult to style a horizontal button.

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">