This document is deprecated! The information on this page refers to a Thesis version that is now obsolete. Please visit the Thesis Docs for current documentation.
Engaging and growing a loyal community is a key goal for many site owners.
While multiple points of communication exist — RSS feeds, email lists, social media, and so forth — the first and possibly most important interaction many a site owner sees is in the comments.
A text link can get the job done. But to really encourage your site visitors to interact with your content, having a comment bubble — an image with a comment counter as text inside — can increase comment-based interaction significantly.
So instead of “29 comments” as text, let’s figure out how to make our comment count and engagement link pop off the page like this:
For our example, this comment bubble will be placed on the home page and on single posts. That’s the condition you’ll see in line two of the function below — a condition that can, of course, be changed to suit your tastes.
The function below uses an image as the background.
If you want to follow along without creating your own image for now, you’re welcome to use our “comment bubble” 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:
Provided you have an image to use, the rest is easy.
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 this to 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 “my-comment-bubble.png” to your Thesis /custom/images folder, and for this example, that the image is of a similar size to the red “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/my-comment-bubble.png') 0 0 no-repeat;
float:right; padding:6px 4px; margin:0px;
text-align:center; width:50px; height:50px;
}
.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;
}
The first CSS entry above controls the background image, giving it positional and dimensional references to make the text “inside” the comment image appear generally centered and providing adequate space around the “conversation” icon.
The second CSS entry defines the link, which in the graphic above, would be the number “29” — the number of existing comments for the given post.
For this tutorial, the text is defined as Arial 28px bold, will not be underlined, and is white — a hard contrast against the dark red of the background image. These values can be changed to your preferences.
And that is that.
You should now see a comment-inspiring image with “the number of comments” as — linked! — numerical text, like so:
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!