How to Add a Post Like Button in WordPress with Pure Code

Adding a post like button to WordPress is a common requirement for many blogs. While plugins can provide this functionality, installing a plugin for a simple feature can increase site load. This guide explains how to implement a post like system using pure code.

Step 1: Add the PHP Functionality

Add the following code to your theme's functions.php file. This code handles the AJAX request, records the like count, and uses a cookie to prevent duplicate likes from the same user.

// AJAX like handler function
function dotGood() {
    $id = $_POST["um_id"];
    if ($_POST["um_action"] == 'topTop') {
        $current_likes = get_post_meta($id, 'dotGood', true);
        $expire = time() + 99999999;
        // Set a cookie to record the user's like and prevent duplicates
        $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false;
        setcookie('dotGood_' . $id, $id, $expire, '/', $domain, false);
        if (!$current_likes || !is_numeric($current_likes)) {
            update_post_meta($id, 'dotGood', 1);
        } else {
            update_post_meta($id, 'dotGood', ($current_likes + 1));
        }
        echo get_post_meta($id, 'dotGood', true);
    }
    die;
}
// Register AJAX hooks for both logged-in and non-logged-in users
add_action('wp_ajax_nopriv_dotGood', 'dotGood');
add_action('wp_ajax_dotGood', 'dotGood');

Step 2: Add the JavaScript

Add the following JavaScript to a theme JavaScript file that is already loaded. This code manages the front-end click event and communicates with the backend via AJAX.

// Like function
$.prototype.postLike = function () {
    if ($(this).hasClass('done')) {
        alert('You have already liked this!');
        return false;
    } else {
        $(this).addClass('done');
        var id = $(this).data("id"),
            action = $(this).data('action'),
            rateHolder = $(this).children('.count');
        var ajax_data = {
            action: "dotGood",
            um_id: id,
            um_action: action
        };
        // Send AJAX request to WordPress backend
        $.post("/wp-admin/admin-ajax.php", ajax_data,
               function (data) {
            $(rateHolder).html(data);
        });
        return false;
    }
};
// Bind click event to the like button
$(".dotGood").click(function () {
    $(this).postLike();
});

Step 3: Add the Like Button HTML

Insert the following PHP/HTML code into your single post template file (e.g., single.php or content.php) where you want the button to appear.

<div class="zan">
    <a href="javascript:;" rel="external nofollow" data-action="topTop" data-id="<?php the_ID(); ?>" class="dotGood <?php echo isset($_COOKIE['dotGood_' . $post->ID]) ? 'done' : ''; ?>">
        <span class="count"><?php echo ($dot_good=get_post_meta($post->ID, 'dotGood', true)) ? $dot_good : '0'; ?></span> Likes
    </a>
</div>

Step 4: Style the Button

Finally, add CSS to style the button to match your site's design. Here is a basic example:

.zan a {
    display: inline-block;
    padding: 8px 16px 9px 13px;
    font-size: 14px;
    color: #fff;
    background-color: #fe7f6f;
    text-decoration: none;
    border-radius: 4px;
}
.zan a:hover {
    background-color: #ed1c24;
}
.zan .count {
    font-size: 13px;
    font-weight: bold;
}
.zan a.done {
    background-color: #ed1c24 !important;
    cursor: not-allowed;
}

After completing these steps, refresh a post page. You should see a functional like button. Clicking it will increment the count, and the same user (identified via cookie) will be prevented from liking again.

To extend this feature, you can use WP_Query with meta_key and orderby parameters to create lists like "Most Liked Posts."