A lot of people have commented on my new design how they love the comment bubble next to the post title.  It’s a great way to foster communication and showcase how many people are talking on your site.   So, if you want to add the same functionality to your site, here is the fastest way to do it!

First, you should note in your “index.php” file some code that looks something like this:

<h2 class="posttitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

To break that down, this is a H2 that inserts an automatic link to the post (<?php the_permalink() ?>) and automatically grabs the title from the post (<?php the_title(); ?>).

To put this in your own blog, ou can either start with your own comment bubble design or grab this one:

[link to comment bubble]

I’ve included the PSD so you can change the color as you need to.  You can either add in a background color or save it as a PNG file with transparency – it works either way. Save and upload your comment bubble (JPG, PNG, or GIF only!) either via FTP or the Media Uploader and save the hyperlink – you’ll need it in a second. Head into your theme editor and look for the above code.  Right above it, insert this code:

<div class="commentbubble"><?php comments_number('0', '1', '%'); ?> </div>

To clarify, this adds a div container with the “commentbubble” and inserts the code to call the comments.  The ‘%’ is a variable number that calls any number that’s not 0 or 1.

Finally, add the CSS into your stylesheet:

.commentbubble {
    background-image: url(URL-GOES-HERE);
    height: 37px;
    width: 49px;
    color: REPLACE WITH COLOR;
    font-size: 30px;
    text-align: center;
    padding-top: 5px;
    margin-right: 13px;
    float:left;

}

Save the edits, and preview.  It should put the comment bubble right next to the title.  If you are having trouble having your content text or pictures wrapping around the bubble with the title, right after the commentbubble div, put this code:

<div style=”clear:both”></div>

This is a clearing div that will stop the text-wrapping.