![Like Button](http://thekroyaard.com/wp-content/uploads/2022/03/like-button.png)
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 |