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

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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, Paint.net or GIMP and change the background color to match your site.

blue-comment-comment

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

  • Add Comment Count Reply Bubble To Any Theme
  • Add Comment Bubble With Counter To Entry Meta in Genesis

Twenty Fourteen Theme

Reader Interactions

Comments

  1. Dobbs says

    November 22, 2014 at 2:37 am

    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?

    Log in to Reply
    • Brad Dalton says

      November 22, 2014 at 3:03 am

      What theme are you using?

      Because all themes are not the same.

      Log in to Reply
      • dOBBS says

        November 22, 2014 at 3:57 am

        Twenty Fourteen on theme wordpress 4.0.1

        Log in to Reply
  2. Keyur Amin says

    May 27, 2014 at 10:36 am

    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

    Log in to Reply
    • Brad Dalton says

      May 27, 2014 at 11:36 am

      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.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.