This tutorial was originally posted to http://code.garyjones.co.uk on 2010-08-25. The comments have been carried across to this site. It has been updated here for HTML5 child themes.
If you’re using a Genesis child theme and need to style the comment count number for a post so that it’s different from the word “Comment(s)”, then there are two steps we need to take. First, we need to add some extra markup around the number part, and second, add some CSS to style that markup.
Comment Count Number?
The comment count is the link and number that appear in the byline for each post in most Genesis Framework child themes, after the date and author. It acts as a shortcut to jump straight down to the comments for people who have already read the post, but want to see what new feedback there might be.
Markup
Add the following to your functions.php file:
| <?php | |
| // Don't include above <?php | |
| add_filter( 'genesis_post_comments_shortcode', 'prefix_post_comments_shortcode' ); | |
| /** | |
| * Amend the post comments shortcode to add extra markup for styling. | |
| * | |
| * @author Gary Jones | |
| * @link http://gamajo.com/style-comment-number/ | |
| * | |
| * @param string $output HTML markup. | |
| * | |
| * @return string HTML markup. | |
| */ | |
| function prefix_post_comments_shortcode( $output ) { | |
| return preg_replace( '/#comments"\>(\d+) Comment/', '#comments"><span class="entry-comments-number">$1</span> Comment', $output ); | |
| } |
What we’re doing here is editing the Genesis [post_comments] shortcode output that you may be using within another function, or in use by your child theme already. We use a regular expression to target the right bit of output, then replace it with similar code that has the extra markup in it. We then finish the filter by returning our amended output.
The output would be something like:
| <span class="entry-comments"><!-- class will be post-comments for XHTML child themes --> | |
| <a href="http://example.com/post-name/#comments"><span class="entry-comments-number">1</span> Comment</a> | |
| </span> |
Styles
Now that’s done, we can use that extra span to target the CSS.
http://gist.github.com/GaryJones/1708175#file_style.css
In this case, we’ve simply made the text larger for the comment count number, but you can add in other styles as needed. You can even give the number a background image, and not the “Comment” part:
It’s Not Working For Zero Comments!
The default output for more than one comment in Genesis is “<number> Comments”.
The default output for exactly one comment is “1 Comment”.
The default output for exactly one comment is “Leave a Comment”.
Can you spot the problem?
The inconsistent lack of a comment count number when there are no comments means that the regular expression in the first PHP function won’t match and therefore won’t do the replacement that adds in our markup. Luckily, the [post_comments] shortcode has an attribute that allows you to set the format when there are zero comments. (You can also do it for one comment and more than one comment). You can add this attribute via Genesis Simple Edits plugin, or just filter in it via the functions.php file:
| <?php | |
| // Don't include above <?php | |
| add_filter( 'genesis_post_info', 'prefix_post_info' ); | |
| /** | |
| * Filter the post info line. | |
| * | |
| * Copies the default output and changes it to include a `zero` attribute for the post_comments shortcode. | |
| * | |
| * @author Gary Jones | |
| * @link http://gamajo.com/style-comment-number/ | |
| * | |
| * @param string $output HTML markup, likely with shortcodes. | |
| * | |
| * @return string HTML markup. | |
| */ | |
| function prefix_post_info( $post_info ) { | |
| return '[post_date] ' . __( 'by', 'textdomain' ) . ' [post_author_posts_link] [post_comments zero="0 Comments"] [post_edit]'; | |
| } |
Conclusion
You can now add markup around the comment count number, and let your creative juices flow about how interesting you can make it look.
Hi Gary, this is a great tutorial & is really easy to follow. Thank you for that. I’m wondering if you have a minute to explain how to get the number count to say ‘0’ when there are no comments.
Thank you for sharing!
Hi Katie,
You’ll need to call the post comment shortcode with the relevant attributes set – see http://www.studiopress.com/tutorials/comments#comments-link as an example (if you have, say, post author or date in the genesis_post_meta, then you’ll need to add these shortcodes in as well – it’s going to be different for each theme). In this case, as an absolute minimum, you’ll want:
[post_comments zero="0"]I swapped the short code in the genesis_post_info and it worked perfectly. Thank you again! I love how many tutorials there are for Genesis, and how helpful everyone connected to it is.
Hi Gary,
Thanks for the tutorial. I have no problem doing the CSS part, especially putting the balloon background.
However, how do I align the bubble so that it sits beside the post title?
Hi Affan,
Can’t really give an answer to that without seeing the site it’s currently applied to, since markup, and existing styles might be affecting it.
How can I force “0 Comments” instead of using “Leave a Comment” along with this technique of yours!
Nice Tutorial.
See http://www.studiopress.com/tutorials/comments#comments-link
Edit 2013-09-09: The tutorial now includes a mini-tutorial for that.
Hi — this is great, thank you. How would I do this if I wanted to style different comments differently? That is, I have multiple “Genesis Featured Posts” widgets on my site, and they are different size and styles, so what works for one won’t work for the others. How can I ensure I can target them individually?