The ultimate wikidot comments counter

The ultimate wikidot comments counter

A sophisticated, conditional way to present the number of comments

A couple of weeks ago Timothy Foster presented the singular/plural CSS changer for counting comments. Today, I’d like to build on his idea and take the comments counting to the next level. The aim is for the comments counter to not only be able to add/remove the 's' on the end of comments, but for it to also say 'No comments yet' when the page has not yet been commented. If you’d like to see it in action, I’ve added it to the comments for BMC blog posts… just scroll down to the bottom of the page.

The basics

We’ll start with the basics, building the singular/plural support. For this tutorial, I'm assuming that you're working with the comments module in the live template, but this could just as easily be applied to the ListPages module.

On the live template (category:_template) with the comments module, you will presumably want to say something along the lines of '12 comments'. To remove that pesky 's' when only one comment has been posted, you just need to wrap a span around the 's', and use the %%comments%% variable in the class name.

%%comments%% comment[[span class="sp%%comments"]]s[[/span]]

Then, for the CSS that will hide the 's' when only one comment has been posted, we do something a little like this…

.sp1 {display:none;}

Supporting no comments

So that was the solution Timothy came up with. Now we’ll use this on a larger scale to add the 'No comments yet' section. All you have to do is wrap the entire phrase used above in a span, and add the 'No comments yet' section in a separate span. We will use two classes for the 'No comments yet' element - I’ll explain why a little later on.

[[span class="zeroComments c%%comments%%"]]No comments yet...[[/span]][[span class="allComments%%comments%%"]]%%comments%% comment[[span class="sp%%comments%%"]]s[[/span]][[/span]]

Using CSS, we can toggle the display of each of span elements depending on the number of comments that have been posted. We want to hide the zeroComments class by default, and only display it when %%comments%% returns 0. This is the reason for using the two separate classes in the one span. You could hide it inline with style="display:none;" and then override it with !important, but I prefer to keep everything neat and tidy. We also want to hide the allComments class when no comments have been made.

.sp1 {display:none;}
.zeroComments {display:none;}
.zeroComments.c0 {display:inline;}
.allComments0 {display:none;}

You then can put this in a CSS module on the _template page, or add it to your site’s main CSS if you plan on using it in multiple categories.

Bringing it all together

For those of you who like to take the easy route, here is everything bundled up in a nice, easy to copy block:

+ Comments
+++ [[span class="zeroComments c%%comments%%"]]No comments yet...[[/span]][[span class="allComments%%comments%%"]]%%comments%% comment[[span class="sp%%comments%%"]]s[[/span]][[/span]]

[[module Comments]]

[[module CSS]]
.sp1 {display:none;}
.zeroComments {display:none;}
.zeroComments.c0 {display:inline;}
.allComments0 {display:none;}
[[/module]]

And there you have it… how to add a more advanced comments counter to your wikidot site. Of course, there is the potential to show something completely different for every individual number of comments, but that would get very complex. There is one different application of this that I can think of, but I’ll save it for a rainy day. Until then, can you think of any novel ways of using this technique other than counting comments?

Enjoy the article? Tweet it!

Discussion - No comments yet…7 comments

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.