Genesis Tutorials

Add Comment Bubble With Counter To Genesis

In this tutorial, i’ll show you 2 ways to replace the comment reply link with a comment bubble that also includes the comment count within the bubble like this:

genesis comment bubble

Method 1

There’s 3 simple steps involved to get the bubble looking exactly like what you see in the above screenshot.

PHP Code: Please copy the PHP code from the view raw link in the Gist and paste it at the end of your child themes functions.php file using your favorite code editor.

CSS Code: Please copy and paste the CSS code near the end of your child themes style.css file before the Media Queries section.

Comment Bubble Image: You can open this png file with your favorite web design tool ( i used and change the colors. The first image is the static color and the 2nd for the hover color. The image needs to be uploaded to your child themes images folder and the file name and file extension need to match whats in the CSS code.

PHP Code

Method 1 Notes

mobile responsive comment bubble

Need Help?

Check the Related Posts links or fire away in the comments.

Other Posts About Comment Bubbles

8 replies on “Add Comment Bubble With Counter To Genesis”

Hey Brad!

Your site is just awesome for a beginner with Genesis like myself!
I am renewing my site based on the Metro theme.
Your various tutorials and snippets are really helping a lot!

Thank you very very much!

Been waiting for Mitch to get back to me, i know they will eventually but a bit slow as they are big business now with over 200,000 users.

Once i have access to their themes i’ll write that tutorial you wanted for the footer.

Yes it was just a basic footer tutorial I was looking for.
This is the footer.php code, this is what each bit means and these are the bits you change.

I appreciate that changes are lost when the theme is upgraded so that could lead on to a “child theme creation” post.

Just a few thoughts.

Leave a Reply

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