How to Add a Comment Bubble Beside Your Headline Title in Thesis

I received an email yesterday asking me how I placed a comment bubble beside my headline titles. I thought that it would make for a good tutorial, so I’m answering that question in today’s post.

Adding a comment bubble beside your headline title in Thesis is a fairly simple and painless process. Just like with most things in Thesis, we will create a function in our custom_functions.php file and then style it in our custom.css file. The process is fairly quick and painless and shouldn’t take more than five minutes of your time. When you are finished, you will have a comment bubble in your Thesis headline title that links to the comments for your post.

Creating the Function to Place Our Comment Bubble

The first thing we need to do is create a function that will only display our comment bubble on certain pages of our site. Copy and paste the following code into your custom_functions.php file:

/* BEGIN Comment Bubble Beside Title */
 function comment_bubble() {
 if (is_home() || is_single()) { ?>
 <div class="bubble">
 <p><a href="<?php comments_link(); ?>"><?php comments_number('0','1','%'); ?></a></p>
 </div>
 <?php }
 }
 add_action('thesis_hook_before_headline', 'comment_bubble');
 add_action('thesis_hook_before_teaser_headline', 'comment_bubble');
 /* END Comment Bubble Beside Title */

As we can see in our code above, we are creating a function that tells WordPress to display our comment bubble on our home page (which is our main blog feed page) and on single pages. We then create a new div class called “bubble” that will house our comment bubble. Within this div class, we enter in some PHP code in order to display the number of comments that our current post has.

Finally, we add this function into the thesis_hook_before_headline hook.

I’ve also added in the hook thesis_hook_before_teaser_headline in case you want to display your comment bubble in your teasers. If you do not use teasers or do not want a comment bubble in your teaser headlines, simply remove this line of code.

Positioning and Styling Our Comment Bubble with CSS

Now that we have added in our code to display our comment bubble beside our headline title, we need to style it in our custom.css file. Copy and paste the following code into your custom.css file:

 .custom #content .headline_area .bubble { position: relative; float: right; margin: 6px 0 0 6px; padding: 0; background: url('images/comment_bubble.gif') no-repeat scroll 0 0; width: 25px; height: 24px; }
 .custom #content .headline_area .bubble p { text-align: center; margin-top: 2px; }
 .custom #content .headline_area .bubble a { position: relative; color: #000; font-size: 12px; font-weight: bold; display: block; outline: none; width: 25px; height: 24px; }

Note: Your margins may be different than the ones listed based on your layout. Just change them accordingly to fit your style.

This first of line of code is where you will need to place the URL for your own comment bubble image. We are floating our div class to the right, adding some margins to it to line it up with our headline title, and defining the width and height of it according to our image.

Next we center align our text so that the comment number is placed in the middle of our comment bubble.

Finally, we style our hyperlink appropriately, set it to display: block; and define the width and height attributes. This allows for the whole comment bubble to act as a hyperlink, not just the numbered text.

There you have it! By wielding the power of Thesis hooks and CSS, we have implemented our own comment bubble beside our headline title.

Photo by: webtreats