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.
Add the following to your
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:
Now that’s done, we can use that extra span to target the 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
You can now add markup around the comment count number, and let your creative juices flow about how interesting you can make it look.