If you need to style the comment count number for a post so that it’s different from the word “Comment(s)”, then there’s two steps we need to take. First, we need to add some extra markup around the number part, and secondly, add some CSS to style that markup.
Open up the functions.php file in your child theme and add the following code. The code should be entered at the end of the file, just before the closing ?> if there is one.
What we’re doing here is editing the [post_comments] shortcode that you may be using within another function, or in use by your child theme already. We make use of a regular expression to make sure we’re definitely targeting the right bit of output, then we replace it with a similar bit of code that has 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 make use of those extra spans to target the CSS. First we can set a style for the “Comment” part, and then change it for the number part.
In this case, we’ve simply made the text larger for the number, but you can add in other styles as needed. You can even give the number a background image, and not the “Comment” part:
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.