Previous Post: Get the Number of Posts for Each Post Type
Adding a Comment Formatting Guidelines for Visitors
By default WordPress allows your visitors to post certain kinds of HTML markups and attributes in comments, and normally those white-listed markups and attributes are displayed to help your visitors comment properly, as shown in Twenty Ten — the default WordPress theme:
Twenty Ten Formatting Guidelines
That’s the most basic form of a comment formatting guideline that you can add to a comment form. If you don’t use comment_form() function in your theme (added in WordPress 3.0), you can manually add the above guideline to comments.php, like so:
- <?php
- echo '<p class="form-allowed-tags">' . sprintf( __( 'You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: %s' ), ' <code>' . allowed_tags() . '</code>' ) . '</p>';
- ?>
<?php echo '<p class="form-allowed-tags">' . sprintf( __( 'You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: %s' ), ' <code>' . allowed_tags() . '</code>' ) . '</p>'; ?>
While such snippet can be enough for most websites/blogs, you should consider adding more guidelines, for example:
Drupal Formatting Guidelines
Much nicer, eh? To have those guidelines, simply use this:
- <div class="comment-guidelines">
- <ul>
- <li><?php _e('Web page addresses and e-mail addresses turn into links automatically.'); ?></li>
- <li><?php printf(__('Allowed HTML tags: %s'), allowed_tags()); ?></li>
- <li><?php _e('Lines and paragraphs break automatically.'); ?></li>
- </ul>
- </div>
<div class="comment-guidelines">
<ul>
<li><?php _e('Web page addresses and e-mail addresses turn into links automatically.'); ?></li>
<li><?php printf(__('Allowed HTML tags: %s'), allowed_tags()); ?></li>
<li><?php _e('Lines and paragraphs break automatically.'); ?></li>
</ul>
</div>and make sure you have some nice CSS rules for the container, too 
.
Now what if you want those guidelines to appear only when your visitors click or hover on the textarea, just like the comment form on stackoverflow.com? Javascript is the answer!
The first thing to do is, of course, hide the guidelines, in your CSS file:
- .comment-guidelines {
- display: none;
- }
.comment-guidelines {
display: none;
}Assuming that you have a common.js file and jQuery that are enqueued correctly, all you have to do is to add this to common.js:
- jQuery(document).ready(function(){
- /* Comment guidelines */
- jQuery('textarea#comment').click(function(){
- jQuery('.comment-guidelines').fadeIn('fast');
- });
- jQuery('textarea#comment').blur(function(){
- jQuery('.comment-guidelines').fadeOut('fast');
- });
- });
jQuery(document).ready(function(){
/* Comment guidelines */
jQuery('textarea#comment').click(function(){
jQuery('.comment-guidelines').fadeIn('fast');
});
jQuery('textarea#comment').blur(function(){
jQuery('.comment-guidelines').fadeOut('fast');
});
});Refresh the page and you should see the guidelines quickly fade in when you click on the textarea and they will quickly fade out again when you click outside of the textarea.
That might look cool already, but you can of course make it look more professional by adding additional CSS rules. In my opinion you should make the comment-guidelines container float or position it using absolute positioning. Another thing is, when a visitor click on a reply link, the width for comment-guidelines will be narrower (in most cases), so please keep that in mind!
Other Useful Tips
Topics: comments, CSS, end-users, Javascript, wordpress comments
I’ve been googling forever and I still can’t find how to simply make comment text appear bold when it’s not my blog. It sounds so simple, but I really don’t want to hop on someone’s blog and try out what I think the syntax should be until I get it right, but I will if I have to. All the advice out there is how to manage your own blog. Am I doomed to post every comment forever in plain text only?
I want advice for visitors, not advice for WordPress bloggers.
Hi DP!
You know what, you are talking about the very problem that I did worry about when writing this. It is indeed a blogger’s task to tell visitors how to use mark ups (or HTML in this case). That’s why I wrote this to encourage blog owners to show common visitors how to have a ‘cool’ comment.
I’m sorry that you couldn’t find what you expected to see here (I guess the keywords you searched for were comment formatting guidelines or wordpress comment formatting guidelines
). WordPress’s comments are all about HTML, and there is actually a very good guide that will tell you explicitly how to use HTML markups in comments (you just didn’t use the right keywords 
.)
Hope that helps!
hi, thank you!
thanks for this guide really very informative and interesting looking forward to many more WP tutorials. Makes life as a blogger easier
Another WordPress tutorial about comment formatting. When I read it, it’s just simple but knowing that there’s a syntax or the basic html, I know I’m not expert on this.
It’s all about HTML about comment formatting. A good guide to follow. Thanks.
Very useful tip, thank you for this!
Sorry, but I always make a little mess with this, do you refer to wordpress.org or. com? that maybe it is a very basic question but I do big messes.
WordPress.org, definitely
.