It has been some time since I last posted and I was spending my time learning Javascript to implement my first wordpress function (not a plugin). I have decided to create my own Wordpress Comment Quoting System.

This “How To” guide will show you a detailed method to build your own quoting function. I’ve done all the Javascript programming. All you need to do is implement with the step by step guide below. The code isn’t very clean but it does the job without a need of a plugin (I hate plugins so … ).

What is a Comment Quoting Function?

A picture tells a thousand words.

So basically quoting is used to indicate that you are replying to the person’s statement you have quoted. Thus allowing readers to understand who you are replying to and what your comment is all about.

Building your own Wordpress Comment Quoting Function in your Template

I’ve written this in such a way that there is no need to reinstall the plugin and all the tedious stuff when you upgrade your wordpress. All you need to do is,

1. Do this one-time implementation and when you upgrade your wordpress …
2. Upload your theme
3. Activate your theme. And you’re good to go.

PseudoCode of the Function

PseudoCode is a way of describing the flow of the program (in this case, function).

1. Get comment ID
2. Get data (Name, Date, Quote and Comments) from the comment ID
3. Process and separate all the elements stated above
4. Process the Comments by deleting <blockquotes> and <br />. So only 1 level quoting is allowed.
5. Put all the quotes into a string
6. Display the quoted text with Name, Date and Comment in the Comment textarea.

Step By Step Implementation

1. Create a “js” folder under your theme section (same level as your .CSS file).
2. In the “js” folder, create a .js file for the comment function you are going to create. eg. “post-comment.js” or anything relevant.
3. Download/Copy the code I have provided into the .js file you’ve just created in step 2.
4. Because of the processing part in the javascript code, there is a formula to write your comment. So … Yes you need to edit some stuff in the “comment.php” file.
5. In the first line of “comment.php”, add this tag <script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/js/post-comment.js”></script>
6. In the <li></li> tag of comment.php (The formula for the function to work)
   <li>
   <div class=”comment_header”>
   <?php echo get_avatar( $comment, 40 ); ?>
   <cite class=”comment_name”><?php comment_author_link() ?></cite> Says:
   <?php if ($comment->comment_approved == ‘0′) : ?>
   <em>Your comment is awaiting moderation.</em>
   <?php endif; ?>
   <br />
   <small class=”commentmetadata”><a href=”#comment-<?php comment_ID() ?>” title=”" class=”comment_date”><?php comment_date(‘F jS, Y’) ?> at <?php comment_time() ?></a> <?php edit_comment_link(‘edit’,'&nbsp;&nbsp;’,”); ?></small>
   </div>
   <div class=”comment_data”><?php comment_text() ?></div>
   <div class=”comment_function”><a class=”quote_button” style=”text-decoration: none;” href=”javascript:void(0);” onclick=”quotecomment(<?php comment_ID() ?>);” title=”Quote Button”>Quote</a></div>
   </li>
7. I hope you are still keeping up. The idea is to add all the bolded words above. NOTE: They all must be added or the javascript wouldn’t know where to process the quote.
8. Style your <blockquote> and Quote Button to look pretty in respect to your theme.

So that’s all for implementing the Wordpress Comment Quoting Function. I hope I did not miss out anything. If I do miss out anything, please leave a comment and I’ll fix it. For the Javascript experts out there, your input to further improving this block of Javascript function would be greatly appreciated as well!