• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2662

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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 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

Register for full access

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.

mobile responsive comment bubble

Need Help?

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

Other Posts About Comment Bubbles

  • Add Comment Bubble To Comment Reply Link In 2014 Theme
  • Add Comment Count Reply Bubble To Any Theme

Entry Meta

Reader Interactions

Comments

  1. Paal Joachim says

    August 17, 2014 at 2:23 pm

    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!

    Log in to Reply
    • Brad Dalton says

      August 17, 2014 at 2:28 pm

      Thanks for stopping by and for the kind words Paal

      Log in to Reply
  2. Keith Davis says

    May 24, 2014 at 5:55 pm

    Hi Brad
    Great idea and it looks fabulous.

    A great resource for the Genesis community.

    Log in to Reply
    • Brad Dalton says

      May 24, 2014 at 6:38 pm

      Thanks Keith

      Log in to Reply
      • Keith Davis says

        May 24, 2014 at 6:40 pm

        Any word on your Elegant Themes connection Brad?

        Log in to Reply
        • Brad Dalton says

          May 24, 2014 at 6:58 pm

          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.

          Log in to Reply
          • Keith Davis says

            May 24, 2014 at 8:16 pm

            I’ll send you a message via your contact form.

          • Keith Davis says

            May 24, 2014 at 8:25 pm

            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 Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems