How To Add Like & Dislike Button on WordPress Without Plugin

Like Button
Like Button

Hey you can easily add like and dislike button on your wordpress website. Use two different code in wordpress’s theme and add like and dislike button.

How To Add Like & Dislike Button

If you have custom coded WordPress theme so paste given codes on wordpress theme without any type of worries. Follow simple steps –

Add Like & Dislike Library
Paste this code in <head> section for css icon library

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Functions.php
>> Open functions.php file of active theme’s file.
>> Then Paste this code and SAVE.

//---- Get like or dislike count
function thekroyaard_like_count($type = 'likes') {
$current_count = get_post_meta(get_the_id(), $type, true);
return ($current_count ? $current_count : 0);
}

//---- Process like or dislike
function thekroyaard_like_function() {
$process_for_like = false;
$redirect = false;

// Check if like or dislike
if(is_singular('post')) {
if(isset($_GET['post_action'])) {
if($_GET['post_action'] == 'like') {
// Like
$like_count = get_post_meta(get_the_id(), 'likes', true);

if($like_count) {
$like_count = $like_count + 1;
}else {
$like_count = 1;
}

$process_for_like = update_post_meta(get_the_id(), 'likes', $like_count);
}elseif($_GET['post_action'] == 'dislike') {
// Dislike
$dislike_count = get_post_meta(get_the_id(), 'dislikes', true);

if($dislike_count) {
$dislike_count = $dislike_count + 1;
}else {
$dislike_count = 1;
}

$process_for_like = update_post_meta(get_the_id(), 'dislikes', $dislike_count);
}

if($process_for_like) {
$redirect = get_the_permalink();
}
}
}

// Redirect
if($redirect) {
wp_redirect($redirect);
die;
}
}

add_action('template_redirect', 'thekroyaard_like_function');

>> Then paste given code for where you want to Show Like and Dislike button

<div class="likes">
<div class="likes__item likes__item--like">
<a href="<?php echo add_query_arg('post_action', 'like'); ?>">
<i class="fa fa-thumbs-up"></i> (<?php echo thekroyaard_like_count('likes') ?>) </a> </div>
<div class="likes__item likes__item--dislike">
<a href="<?php echo add_query_arg('post_action', 'dislike'); ?>">
<i class="fa fa-thumbs-down"></i> (<?php echo thekroyaard_like_count('dislikes') ?>) </a> </div>
</div>

Designed CSS code for Like & Dislike Button

.likes {
display: flex;
}

.likes__item {
list-style: none;
}

.likes__item:not(:last-child) {
margin-right: 20px;
}

.likes__item a {
padding: 10px 15px;
display: inline-block;
border-bottom: 2px solid;
border-radius: 3px;
box-shadow: none;
background: #f5f5f5;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 100%;
}

.likes__item a:hover {
color: #fff;
}

.likes__item--like a {
border-bottom-color: #47ba72;
color: #47ba72;
}

.likes__item--dislike a {
border-bottom-color: #ba6547;
color: #ba6547;
}

.likes__item--like a:hover {
background: #47ba72;
}

.likes__item--dislike a:hover {
background: #ba6547;
}

Hope this code work perfectly, Have any other type of help so contact me via contact us section.

Watch Video

Language Hindi
Published on 15-03-2022
YT Channel TheKroyaard COM
How To, WordPress