Add Comment Count Reply Bubble To Any Theme

The Twenty Eleven default theme for WordPress includes a comment bubble which displays inline with the entry title in the entry header on the home page archive loop.

The comment bubble includes a comment count displayed within the bubble and a hidden reply link.

Once you click the bubble, it takes you to the comments form.

Here’s the result of what the code on this page generates tested on the Genesis Sample child theme.

Code Installation

There’s 4 steps involved to install the code correctly so it generates exactly what you see in the screenshots.

1. Copy the code from the view raw link in the Gist labelled functions.php and paste it at the end of your child themes functions.php file using a code editor like Notepad++.
2. Create a new file named comments_link.php then copy & paste the code from the Gist labelled comments_link.php into the new file and upload to the root directory of your child theme.
3. Copy and paste the code from the Gist labelled style.css at the end of your child themes style.css file before the start of your Media Queries.
4. The last step involves uploading the comment-bubble.png image to your child themes images folder. You can grab the image fro the Twenty Eleven parent themes images folder.

How The Code Works

The code creates a template which you can use directly in a template file or in this example, a custom function with hook and conditional tag.

The custom function uses get_template_part enabling you to use the code in any file or function as many times as you like.

The code also includes 2 snippets for use with any Genesis child theme so you won’t need to add these 2 snippets if using another theme framework or parent theme.

You can also change the classes in the comments_link.php file to match your theme and match the classes used in your style sheet.

Use In Other Themes

The code has been tested on the Genesis Sample child theme and may need modifying for use on other themes as all themes are coded differently.

The use of genesis_hooks only works on Genesis child themes so this hook will need to be changed to a theme specific entry header or entry title hook for non Genesis themes.

Theme which do not include action hooks will need to use a WordPress hook like loop_start or filter the_content in which case the CSS will need to be modified.

If you purely wanted to add a comment bubble to a StudioPress child theme, you may find it easier to filter the post info and style the existing entry-comments-link class.

Related Posts

• Add Comment Bubble To Comment Reply Link
• Genesis: Add Comment Bubble With Counter To Entry Meta