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:
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 Paint.net) 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
- Tested on the Outreach Pro child theme by StudioPress.
- Media Queries not included.
- Code may need tweaking to work on other StudioPress or Genesis child themes.
Need Help?
Check the Related Posts links or fire away in the comments.