Create the Like Button Function:
- First, you'll need to create a custom function that will handle the like button functionality. This function should not echo the output directly, but instead, return the HTML code for the like button.
function my_custom_like_button($comment_id) {
$like_count = get_comment_meta($comment_id, 'like_count', true);
$like_count = $like_count ? $like_count : 0;
$output = '<div class="like-button">';
$output .= '<a href="#" class="like-link" data-comment-id="' . $comment_id . '">';
$output .= '<i class="fas fa-thumbs-up"></i> Like (' . $like_count . ')';
$output .= '</a>';
$output .= '</div>';
return $output;
}
In this example, the my_custom_like_button
function takes the $comment_id
as a parameter and returns the HTML code for the like button. It retrieves the like count from the comment metadata and displays it alongside the like button.
Add the Like Button to the Comment Form:
- Next, you'll need to add the like button to the comment form. You can do this by hooking into the
comment_form_after_fields
action, which allows you to add additional content after the comment form fields.
add_action('comment_form_after_fields', 'add_like_button_to_comment_form');
function add_like_button_to_comment_form() {
global $comment;
echo my_custom_like_button($comment->comment_ID);
}
In this example, the add_like_button_to_comment_form
function is hooked into the comment_form_after_fields
action, which allows it to be executed after the comment form fields are displayed. Inside the function, we use the my_custom_like_button
function to generate the like button HTML and echo it to the page.
Handle the Like Button Interaction:
- Finally, you'll need to handle the like button interaction, such as incrementing the like count when a user clicks the button. This can be done using AJAX, which allows you to update the like count without refreshing the entire page.
Here's an example of how you can handle the like button interaction using AJAX:
jQuery(document).ready(function($) {
$('.like-link').click(function(e) {
e.preventDefault();
var commentId = $(this).data('comment-id');
var likeButton = $(this);
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'increment_like_count',
comment_id: commentId
},
success: function(response) {
likeButton.find('i').addClass('liked');
likeButton.find('span').text('Unlike (' + response.like_count + ')');
}
});
});
});
In this example, we're using jQuery to listen for clicks on the like button. When a user clicks the button, we prevent the default link behavior, retrieve the comment ID, and then use AJAX to send a request to the server to increment the like count.
On the server-side, you'll need to create a custom AJAX action to handle the like count incrementation. Here's an example:
add_action('wp_ajax_increment_like_count', 'increment_like_count');
add_action('wp_ajax_nopriv_increment_like_count', 'increment_like_count');
function increment_like_count() {
$comment_id = $_POST['comment_id'];
$like_count = get_comment_meta($comment_id, 'like_count', true);
$like_count = $like_count ? $like_count : 0;
$like_count++;
update_comment_meta($comment_id, 'like_count', $like_count);
wp_send_json_success(array('like_count' => $like_count));
}
In this example, the increment_like_count
function is hooked into the wp_ajax_increment_like_count
and wp_ajax_nopriv_increment_like_count
actions, which allow both authenticated and unauthenticated users to interact with the like button. The function retrieves the current like count, increments it, updates the comment metadata, and then sends the updated like count back to the client using wp_send_json_success
.