Complete Guide to Using Thesis 2 for WordPress. Click Here.

≡ Menu

Step 52: How to add a comment bubble to Thesis 2

comments-bubble

Now let’s tackle an old favorite.  We’re going to learn how to add a comment bubble to Thesis 2.  This was done using PHP, Hooks, and CSS in Thesis pre-2.0.  Now we can do it using the Thesis Skin Editor using HTML and CSS.  No PHP!  Hooray!  This turned out to be easier than I thought it would be.  Once again, I’m impressed with how much we can do with Thesis 2 without writing a single line of PHP.  Continue reading to find out how to create a comment bubble in Thesis 2.

From the WordPress Dashboard navigate to the Thesis Home page then Skins => Skin Editor.  We need to upload our comment bubble graphic so click on the “Images” button.  In Step 28 we learned how to upload CSS images.

Thesis 2 Images Page

Upload your comment bubble file.  Mine is a 56px by 53px bubble using my secondary B2 color.

Make note of the CSS Reference.

Thesis 2 CSS Images Comments Bubble

Next, click on the “CSS” button at the top of the page.

Thesis 2 CSS Page

Click on the “Custom CSS” tab.  This tab is sort of a CSS dumping ground similar to the old custom-css file in pre-2.0 Thesis.  When there isn’t a native CSS Package you can drop CSS in here.

Thesis 2 Custom CSS Tab

Before we go too far, let’s review our starting point.  Below is the native display of comments in the Thesis Classic Skin.  Take note of a couple things here, the brackets and the word “comments”.

Thesis 2 Classic Skin Comments

The CSS needed to add the comment bubble is below.

/* Add comment bubble to number of comments */
.num_comments {
background-image: url('images/comment-bubble.png');
background-repeat: no-repeat;
background-position: center;
padding-top:10px; 
padding-bottom: 25px;
padding-left: 25px; 
padding-right: 25px; 
margin: 0px;
width: 56px; 
height: 53px;
color: #ffffff;
font-weight: bold; }
/* Hides the brackets around the comments */
.bracket {
visibility: hidden;
}

I’ve added some comments to my CSS so in 6 months I’ll remember what it does.  You can create comments by enclosing them in “/*” and “*/”.  This reminds me of a funny college programming story.  My first class was in Cobol.  The professor told us it was a self documenting language due to its English sentence like syntax.  I turned in my first assignment expecting an “A”.  I got a “B” because I didn’t comment my code.  I thought it was self documenting!?  Lesson learned.  Always comment your code.

I’m doing two things here.  The “.num_comments” CSS will add the background image and control the display of the image.  The “.bracket” CSS “hides” the brackets.  I couldn’t find a way to turn them off, so I’m using the CSS “visibility” control to hide them from view.

Thesis 2 Comments Bubble Custom CSS

Click the green “Save CSS” button as we are done here.

Here is what our Thesis 2 comments bubble looks like.  If this is the look you want, you can stop here.

Comments Bubble Formatting

If, like me, you don’t want to see the “comments” text, then continue reading.

Click the “HTML” button.  We will work on the “Home” template.

Thesis HTML Home

Scroll down to the “Home Post Box”.

Thesis 2 Home Post Box

Move your cursor over the “Num Comments Wrapper” and click the black arrow to open it up.

Thesis 2 Num Comments Box

Move your cursor over the green “Number of Comments” box and click the gear icon.

Uncheck the “Show term with number…” box.  This will remove the text “comments” from our comments bubble.  Click the “X” in the top right corner.

Thesis 2 Number of Comments

Click the green “Save Template” button.

Thesis 2 Save Template

We’re all done.  Let’s see what our comments bubble looks like on a single post page.

Thesis 2 Comments Bubble

The comments bubble looks like the picture below for our home page.

Thesis 2 Home Page Comment Bubble

About the author: I’m a techie, a gadget geek, a former programmer, and all-around technology nut. Currently I’m a business analyst for a technology company. I love what technology can do for us. I love smartphones and apps for everything. Building sites with Thesis 2.0 and WordPress help me to reconnect with the feeling of building something tangible.

I’m on: Google+ and Twitter

{ 17 comments… add one }
  • Julian Illman June 3, 2013, 12:18 PM

    Hi Doug,

    Great tutorial. I got this sort of working. Looked great on my iMac screen but on the iPad the comments bubble appeared in the center of the screen with no number in it.

    Also, in an ideal world I’d like my comments to appear to the right of my title. I’ve also recently added ‘Google + comments for Wordpress’ plugin, which enables me to add comments from FB, Google+ and Wordpress theme. Is it possible for the FB and G+ comments to show in the comments number box as we have tended to receive these comments rather than WP comments.

    Any suggestions gratefully received.

    Many thanks

    Julian

  • Doug Macklem June 3, 2013, 3:52 PM

    Julian: I checked out my site on the iPad as I previously hadn’t done this. I even checked on my Nexus 7. Both look good. I went to your site but I don’t see the comment bubble at all. I can sometimes figure things out if I can see the page. Do you have somewhere I can see it working?

    I breifly tried to put the comment bubble in line with the title. While I was able to put it on the next line, I didn’t get it to appear in the title line. I probably gave up too quick on this but was happy to get it working in its current form.

    As to the comment plug-ins, I haven’t used any of these so I’m not much help here. I kind of like how you can see Facebook and G+ on your site. I imagine it would be difficult to incorporate these into a single count but again, I’m not sure.

  • chicsinred June 27, 2013, 2:55 AM

    Thank you for the awesome tutorial. Now I managed to get rid of the boring generic comment

  • fitness mobile phone apps July 18, 2013, 10:06 PM

    Hi! I just wanted to ask if you ever have any issues with hackers?
    My last blog (wordpress) was hacked and I ended up losing many months of hard work due to no backup.
    Do you have any solutions to stop hackers?

  • Doug Macklem July 21, 2013, 7:50 PM

    I have not. I can only suggest nightly back-ups so you can restore to a point prior to being hacked. Also, make sure you are using strong passwords for all accounts.

  • instructables.com January 9, 2014, 3:03 PM

    Hey! I know this is kind of off topic but I was wondering
    which blog platform are you using for this website?

    I’m getting fed up of Wordpress because I’ve had issues with hackers and I’m looking at options for another platform.
    I would be fantastic if you could point me in
    the direction of a good platform.

  • Doug Macklem January 11, 2014, 12:54 PM

    I have only used WordPress so I’m not qualified to advise on other platforms. WP is probably the largest platform with the most available knowledge and help. There are a few things you can do to lower the chance of hacking:
    * Always run the most recent WP update
    * Remove/rename the default user ID, “Admin”
    * Use very strong passwords
    * Minimize plug-ins, especially if you are unsure about them (I tend to avoid any plug-in without a recent update as the developer may have abandoned it)

  • Dominik January 30, 2014, 5:57 PM

    Hey a question i have tried the last 4 hours everithing hope you can help.

    I want it on the headline like this site: bonek.de

    Do you have an tip how to get that like named site?

  • Doug Macklem January 30, 2014, 8:24 PM

    I actually tried to do that once and didn’t have much luck so I left it as I have it now. I need to circle back and try again. If you do get it working, please post back for the rest of us.

  • Sachin February 22, 2014, 3:08 AM

    Thanks for insightful articles. I have added comment bubble to my site but I want it to display next to Post Header, your tutorial help us to add it at the bottom of post any help???

    It seems like we need to move ‘Number of Comments’ box in ‘Headline area’ but I could not able to do it.

  • Doug Macklem February 22, 2014, 8:06 AM

    I actually tried as well and was unable to make it look nice. I haven’t circled back to try again.

  • jasa pembuatan website medan June 9, 2014, 1:07 PM

    We’re a group of volunteers and opening a new scheme in our community.
    Your website provided us with valuable information to work on. You have done an impressive job and our entire community will be grateful to you.

  • stereotypedphil24.beeplog.com July 15, 2014, 4:37 PM

    Hello there! Quick question that’s entirely off topic.

    Do you know how to make your site mobile friendly?
    My web site looks weird when viewing from my iphone4.
    I’m trying to find a theme or plugin that might be able to
    fix this issue. If you have any suggestions, please share.
    Many thanks!

  • Doug Macklem July 19, 2014, 11:44 AM

    This site is mobile friendly. Give it a try on your phone or tablet. Check out Thesis Classic Responsive theme for this. A recent post describes setting up this theme. http://thriftyzizel.com/switching-to-the-thesis-2-classic-responsive-theme/

  • Lawerence May 13, 2016, 9:03 PM

    Woah! I’m really enjoying the template/theme of this site.
    It’s simple, yet effective. A lot of times it’s challenging to get that “perfect balance” between user friendliness and appearance.
    I must say you have done a excellent job with this. Also, the blog loads extremely
    fast for me on Opera. Outstanding Blog!

  • blog.giallozafferano.it March 28, 2017, 4:25 AM

    After I originally commented I seem to have clicked the -Notify me when new comments are
    added- checkbox and from now on whenever a comment is added I
    get four emails with the same comment. Is there a means you can remove me from that service?
    Kudos!

  • Doug Macklem March 28, 2017, 10:45 AM

    I cannot find a user with your email in the subscriber list. Can you try logging in and canceling your subscription or send me your username and I can try looking that up. Thanks!

Leave a Comment