Add Quote Comment Feature in WordPress By jQuery

Tips& Tricks

quote-comment

A CityNews theme user asked me how to add quote comment feature in WordPress, he wants to enhance the interactivity for the comment section, but you know there’s only reply link beneath the comment content by default, so today I would like to share a very simple and useful trick to add the quote feature for the comment section.

We use the default HTML makeup of each comment simply as below:

<li class="comment">
   <div class="comment-body">
       <div class="author">....</div>
       <div class="comment-meta commentmetadata">....</div>
       <p>..Comment Content...</p>
       <div class="reply">
         <a href="..."  class="comment-reply-link" onclick="...">Reply</a>
       </div>
   </div>
</li>

First,  you should copy the HTML of reply link by jQuery:

jQuery(document).ready(function($){
    $('.reply').each(function(){
       var copy_reply_link = $(this).html();
    });
});

Second, append it to the reply container (.reply)

jQuery(document).ready(function($){
    $('.reply').each(function(){
       var copy_reply_link = $(this).html();
       $(this).append(copy_reply_link);
    });
});

Next, add ‘.quote-link’ class name to the new reply link and change the ‘reply’ text to ‘quote’.

jQuery(document).ready(function($){
    $('.reply').each(function(){
       var copy_reply_link = $(this).html();
       $(this).append(copy_reply_link);
       $(this).children('.comment-reply-link:last-child').addClass('quote-link').html('Quote');
    });
});

You can see the quote link is appeared on the right side of reply link.
WordPress Quote Comment

Next, you should copy the parent comment content to the response textarea with blockquote HTML tag after user clicked the quote link.

$('.quote-link').on('click',function(){
   //Find the content
  var comment_content=$(this).parent().parent().find('p').html();
  //Add Blockquote to the textarea
  $('textarea#comment').html('<blockquote>'+comment_content+'</blockquote>');
 });

Now, just try to click the quote link, you will see the quote text in the textarea like the following screenshot

WordPress Quote Comment

 

The complete code snippet:

jQuery(document).ready(function($){

	/*Add Quote Comment Feature*/
	$('.reply').each(function(){
		var copy_reply_link = $(this).html();
		$(this).append(copy_reply_link);
		$(this).children('.comment-reply-link:last-child').addClass('quote-link').html('Quote');
	});
	
	$('.quote-link').on('click',function(){
		//Find the content
		var comment_content=$(this).parent().parent().find('p').html();
		//Add Blockquote to the textarea
		$('textarea#comment').html('<blockquote>'+comment_content+'</blockquote>');
	});

});

 

That’s it! You can put those jQuery codes into a js file or install Insert Headers and Footers plugin, place those codes into the page footers through this plugin.

 

 

3 thoughts on “Add Quote Comment Feature in WordPress By jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *

* Checkbox GDPR is required

*

I agree

This site uses Akismet to reduce spam. Learn how your comment data is processed.

×