How To Add Bubble On Comment Count – Thesis Theme

In this post, im going to show how to add bubble on comment count on Thesis Theme for WordPress. Using text something like “29 comments” is too mainstream, and adding simple effect like below will definitely make your audience love your site more.

comment_count_bubble_29

If you want to follow along without creating your own image for now, you’re welcome to use my image on your web host’s server — to do so, right-click on the image below, “save as” to your desktop, and upload the comment counter background image to your Thesis /custom/images folder:

comment_count_bubble

First, you need a custom PHP function that pulls the comment count for a given post, and that assigns a few unique classes for later use on the CSS side.

The PHP function will also provide a secondary call to action — a brief snippet of text that displays when an input device hovers over the link — and the link, when clicked, will zip the visitor to the post’s existing comments.

Add below php code on your custom_functions.php file contents:

function bubble_comment_count() {
if ((is_single()) || (is_home())) {
?>
<div class="my-bubble"><span>
<a title="Comment on <?php the_title(); ?>" rel="nofollow"
href="<?php the_permalink() ?>#comments">
<?php comments_number('0', '1', '%'); ?></a></span></div><?php
	}
}
add_action('thesis_hook_before_headline','bubble_comment_count');

In the PHP above, the comment count is one of numbers only — because we’re using an iconic image of “conversation” the need for descriptive text is diminished.

Also of note is the hook chosen — if you prefer a different location, experiment with alternatives to thesis_hook_before_headline used above.

Presuming you have added an image with the file name of “comment_count_bubble.png” to your Thesis /custom/images folder, and for this example, that the image is of a similar size to the blue “comment bubble” shown above, it’s time to add the styles that will control the comment counter.

Add this to your custom.css file contents:

.custom #content .my-bubble {
	background:transparent url('images/comment_count_bubble.png') 0 0 no-repeat;
	float:right; padding:6px 4px; margin:0px;
	text-align:center; width:69px; height:60px;
}
.custom #content .my-bubble span a {
	display:block;
	text-align:center;
	border:none;
	color:#fff;
	font-family:arial;
	font-size:28px;
	line-height:1em;
	font-weight:bold; 
	text-decoration:none;
	padding:0px;
}

You should now see a comment-inspiring image with “the number of comments” as — linked! — numerical text, like so:

comment_count_bubble_29

Of course, you can use any image or icon you like for your linked “bubble” — and the numeric output doesn’t have to be inside the image. Depending on your needs and testing, a comment count link followed by a small image can work well visually.

In other words, while the above example is intended to get you started — it’s time to get creative with your own implementation!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s