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:
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, Paint.net 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.
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?
What theme are you using?
Because all themes are not the same.
Twenty Fourteen on theme wordpress 4.0.1
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.
Cheers
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.