Check below
/* =========================
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');
<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>
.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;
}
const lastClicked = localStorage.getItem("heart_last_clicked");
if (lastClicked && (Date.now() - lastClicked < LOCK_TIME)) {
heart.classList.add("heart-disabled");
}
To reset the counter add this once, refresh the site, then remove it:
update_option('global_heart_count', 1000);
Add below at Snippets once, load any page, then remove it:
delete_option('global_heart_count');
It's Safe, Instant, No admin tools needed