Genesis Tutorials

Twenty Fourteen Theme: Add Comment Bubble To Comment Reply Link

In this tutorial, i’ll provide the CSS code which enables you to add a comment bubble to the comment link in the post meta of the Twenty Fourteen theme like this:

2014 comment bubble

There’s a few simple steps you need to follow:

  • Create a child theme and copy over the content.php file which needs modifying.
  • Add CSS to your child themes style.css file.
  • Add comment bubble image to your child themes images folder.

The Code

This Gist includes 2 blocks of code.

The 1st block of code consists of the entire code for the content.php file which has been slightly modified. Basically all i have done is remove the Comment and Comments text so only the comment count number appears in the bubble.

This file should be added to a child theme for Twenty Fourteen.

The 2nd code block is all CSS and can be pasted into a style.css file in your child theme.

The Comment Bubble Image

Here’s an image you can open up using your favorite graphic design tool like Photoshop, or GIMP and change the background color to match your site.


The file name and extension needs to match whats in the CSS code and you can change the position by modifying the values for the right and top.

The 2nd bubble displays the hover color.

These values are currently set to:

right: -10px;
top: -12px;

Hope you like my tutorial on how to add a comment bubble to a Twenty Fourteen child theme.

Please ask any questions you like in the comments as i’m always happy to engage with you.

More Posts Featuring Comment Bubbles

5 replies on “Twenty Fourteen Theme: Add Comment Bubble To Comment Reply Link”

The COMMENT or LEAVE A COMMENT text is still visible. So it doesn’t look like your picture at all. Any suggestions on how to fix this So it just shows 0 – whatever number?

Thanks for this wonderful post. My theme does have the comment bubble but your knowledge is a treasure for us. I have bookmarked this to return whenever needed for my client needs.


I think you’ll find the links in the related posts contain better solutions than this post as it was the 1st time i played around with comment bubbles however thanks for your feedback anyways.

Leave a Reply

Your email address will not be published. Required fields are marked *