Divi WordPress Them — the smartest and most flexible WordPress theme

Back to Top

Adding a Comment Formatting Guidelines for Visitors

Previous Post:

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

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:

  1. <?php
  2.     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>';
  3. ?>
<?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

Drupal Formatting Guidelines

Much nicer, eh? To have those guidelines, simply use this:

  1. <div class="comment-guidelines">
  2.     <ul>
  3.         <li><?php _e('Web page addresses and e-mail addresses turn into links automatically.'); ?></li>
  4.         <li><?php printf(__('Allowed HTML tags: %s'), allowed_tags()); ?></li>
  5.         <li><?php _e('Lines and paragraphs break automatically.'); ?></li>
  6.     </ul>
  7. </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:

  1. .comment-guidelines {
  2.     display: none;
  3. }
.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:

  1. jQuery(document).ready(function(){
  2.     /* Comment guidelines */
  3.     jQuery('textarea#comment').click(function(){
  4.         jQuery('.comment-guidelines').fadeIn('fast');
  5.     });
  6.     jQuery('textarea#comment').blur(function(){
  7.         jQuery('.comment-guidelines').fadeOut('fast');
  8.     });
  9. });
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!

Print Article Trackback Trackback to this Article   Subscribe to Comments RSS Subscribe to Comments RSS

9 Opinions for Adding a Comment Formatting Guidelines for Visitors

  1. User's Gravatar
    1
    DP April 11, 2011 at 9:12 pm – Permalink

    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.

    • User's Gravatar
      2
      OddOneOut April 11, 2011 at 9:32 pm – Permalink

      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!

  2. User's Gravatar
    3
    yassir July 30, 2011 at 11:48 pm – Permalink

    hi, thank you!

  3. User's Gravatar
    4
    SCTC August 24, 2011 at 6:13 pm – Permalink

    thanks for this guide really very informative and interesting looking forward to many more WP tutorials. Makes life as a blogger easier :)

  4. User's Gravatar
    5
    Katherine Lindholm September 23, 2011 at 5:30 pm – Permalink

    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.

  5. User's Gravatar
    6
    Alice Isabell September 27, 2011 at 6:11 pm – Permalink

    It’s all about HTML about comment formatting. A good guide to follow. Thanks.

  6. User's Gravatar
    7
    Rzym January 20, 2012 at 12:52 am – Permalink

    Very useful tip, thank you for this!

  7. User's Gravatar
    8
    abogados April 1, 2012 at 2:33 am – Permalink

    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.

    • User's Gravatar
      9
      OddOneOut April 1, 2012 at 9:51 pm – Permalink

      WordPress.org, definitely :).

Speak Up Your Mind!

An asterisk (*) indicates a required field and must be filled.




  • Web page and e-mail addresses turn into links automatically.
  • Wrap codes in: <code lang=""></code> or <pre lang="" extra="">
  • Lines and paragraphs break automatically.

Next Post: