Customising WP ULike Like/Unlike Buttons!

WP ULike

WP ULike plugin allows to integrate a beautiful Ajax Like Button into your wordPress website to allow your visitors to like and dislike pages and posts. Its very simple to use and support a widget to display the most liked posts.

Was trying out this nifty little Wordpress plugin and realised that while it's pretty well done, I really need to customise the look and feel of the button when it's used in bbPress. As such, I dissected the code and found some interesting functions that allowed me to assemble my own like/unlike button!

Note that I'll be working on bbPress topic and not the normal Wordpress post. Nevertheless, other than the name of the variables, attributes, tables, etc., everything else should roughly be the same.

Determining number of likes for this topic

This is actually pretty straightforward. If you have access at your Wordpress database, take a look at the wp_postmeta table. You'll find _topicliked with the number of likes that topic received. With that, we can simply do this to get the number of likes for that particular post:

$topic_like_count = get_post_meta($post->ID, '_topicliked', true);

Determining if the current user liked this topic

In order to know which button (like/unlike) to display, we will need to know if the current user already liked this topic. This is saved in wp_ulike_forums table, which will need quite an effort to retrieve it. However, we can instantiate the wp_ulike class to help us out a little. The wp_ulike class contains helper functions that will make our life easier. In this case, to get if the user already liked this topic, do this:

$wp_ulike_class = new wp_ulike();
$status = $wp_ulike_class->get_user_status('ulike_forums', 'topic_id', 'user_id', $post->ID, get_current_user_id());

If the status is like, it meant that the current user already liked this topic. And, you're right, unlike meant that the current user hasn't like it yet...

Customising the button

Utilising the functions above, this is how we customise the look and feel of our like/unlike button. (Please go to the next section to complete the action to like/unlike the topic)

<?php  
    if(is_user_logged_in()):
        $wp_ulike_class = new wp_ulike();
        $status = $wp_ulike_class->get_user_status('ulike_forums', 'topic_id', 'user_id', $post->ID, get_current_user_id());
        $likes = get_post_meta($post->ID, '_topicliked', true);
        $likes_text = $likes ? ' ('. wp_ulike_format_number($likes) .')' : '';
    ?>
        <a class="custom-ulike-button <?php echo (($status !== 'like') ? 'like' : 'unlike'); ?>-state" data-ulike-id="<?php echo $post->ID; ?>" data-ulike-type="likeThisTopic">
            <?php if(($status !== 'like')): ?>
                <?php echo __('Like', 'ebates-forum') . $likes_text; ?>
            <?php else: ?>
                <?php echo __('Unlike', 'ebates-forum') . $likes_text; ?>
            <?php endif; ?>
        </a>
<?php endif; ?>  

Re-writing Ajax

In order to allow the button to actually like/unlike the topic, we will need to write our own Ajax call instead of relying the current one, since the current one will overwrite our customised look and feel.

jQuery(document).ready(function($) {  
    $(document).on('click', '.custom-ulike-button', function(e) {
        var likeButton = $(this);
        var type = likeButton.data('ulike-type');
        var id = likeButton.data('ulike-id');

        if(id != '') {
            jQuery.ajax({
                type:'POST',
                url: ulike_obj.ajaxurl,
                data:{
                    action: 'wp_ulike_process',
                    id: id,
                    type: type
                },
                success: function(data) {
                    // Data returned is the number of likes the topic has after updating
                    // Determine if we should show the count or not
                    var likeCount = (data == '0') ? '' : ' (' + data + ')';

                    // Determine the look and feel based on the state the button was in
                    // In our case, when the button has the CSS class like-state, it meant that it's in the 'like' state', and vice versa
                    if(likeButton.hasClass("like-state")) {
                        likeButton.removeClass("like-state").addClass("unlike-state");
                        likeButton.text('Unlike' + likeCount);
                    } else {
                        likeButton.removeClass("unlike-state").addClass("like-state");
                        likeButton.text('Like' + likeCount);
                    }
                }
            });
        }
    });
});

TADA! It's done! Now the button will like/unlike a topic, and also changes according to the state it's in :)