Love Counter

Category: | Tag:

Check below

Paste below at Snippets

/* =========================
   Global Heart Counter
========================= */

// Create option if not exists
function heart_counter_init() {
    if (get_option('global_heart_count') === false) {
        add_option('global_heart_count', 0);
    }
}
add_action('init', 'heart_counter_init');

// AJAX handler
function handle_heart_click() {
    $count = (int) get_option('global_heart_count', 0);
    $count++;
    update_option('global_heart_count', $count);

    wp_send_json_success([
        'count' => $count
    ]);
}

// AJAX actions
add_action('wp_ajax_heart_click', 'handle_heart_click');
add_action('wp_ajax_nopriv_heart_click', 'handle_heart_click');

Paste below at PHP & HTML (Code Block)

<div class="heart-wrap">
    <span id="heart-btn">❤️</span>
    <span id="heart-count">
        <?php echo get_option('global_heart_count', 0); ?> 
    </span>
    <span class="heart-label">
        People loved this
    </span>
    <span id="heart-msg" class="heart-msg">
        Thank you
    </span>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const heart = document.getElementById("heart-btn");
    const countEl = document.getElementById("heart-count");
    const msgEl = document.getElementById("heart-msg");

    const LOCK_TIME = 24 * 60 * 60 * 1000; // 24 hours in ms
    const STORAGE_KEY = "heart_last_clicked";

    let hideTimer;

    heart.addEventListener("click", function () {
        const lastClicked = localStorage.getItem(STORAGE_KEY);
        const now = Date.now();

        // Check 24-hour lock
        if (lastClicked && (now - lastClicked < LOCK_TIME)) {
            msgEl.textContent = "You can love again after 24 hours ❤️";
            msgEl.classList.add("show");

            clearTimeout(hideTimer);
            hideTimer = setTimeout(() => {
                msgEl.classList.remove("show");
            }, 5000);

            return; 
        }
        // STOP here

        // Allow click → AJAX
        fetch("<?php echo admin_url('admin-ajax.php'); ?>", {
            method: "POST",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            body: "action=heart_click"
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                countEl.textContent = data.data.count;

                msgEl.textContent = "Thank you ❤️";
                msgEl.classList.add("show");

                // Save click time
                localStorage.setItem(STORAGE_KEY, now);

                clearTimeout(hideTimer);
                hideTimer = setTimeout(() => {
                    msgEl.classList.remove("show");
                }, 5000);
            }
        });
    });
});
</script>

Paste below at CSS (Code Block)

.heart-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
#heart-btn {
    cursor: pointer;
    transition: transform 0.2s ease;
}
#heart-btn:hover {
    transform: scale(1.2);
}
.heart-msg {
    opacity: 0;
    visibility: hidden;
    color: #28a745;
    transition: opacity 0.4s ease;
}
.heart-msg.show {
    opacity: 1;
    visibility: visible;
}
.heart-disabled {
    opacity: 0.4;
    pointer-events: none;
}

Paste below at JavaScript (Code Block)

const lastClicked = localStorage.getItem("heart_last_clicked");
if (lastClicked && (Date.now() - lastClicked < LOCK_TIME)) {
    heart.classList.add("heart-disabled");
}

How to reset the counter

To reset the counter add this once, refresh the site, then remove it:

update_option('global_heart_count', 1000);

How to clean Database if you don't want any more (safe & clean)

Add below at Snippets once, load any page, then remove it:

delete_option('global_heart_count');

It's Safe, Instant, No admin tools needed

Copyright © 2026 Siam Naulak.
magnifiercrossmenu