Adding a likes count with thumbs up icon is quite easy without using a plugin. Below I explain the code I used here in my website. All the code explained goes in the functions.php file in the theme, although it can be modified to use in a plugin as well.
Functionality
What we are going to do is store likes count in post meta of whichever the post you choose to add a likes count to. The post meta field name will be “likes”. Whenever the thumbs-up icon is clicked, the likes count will increment. We are not tracking if a user has already liked an article with this method. However that can be done using cookies. We will use a simple shortcode that can be placed where ever in the site we want to show the likes count button.
FYI, the shortcode is using GLOBAL $post variable to get the post ID. And the post ID will be whatever is in the global post value within a wp query loop.
Pre-rec Libraries I am using
I am using the free and always awesome fontawesome library to get the thumbs up icon. Aside that, jQuery library which is a standard load on most websites these days.
Adding Likes Button Shortcode
This will allow the functionality for shortcode [aj_likes_btn] the context of which you can edit for your liking. This shortcode will print the HTML code where ever the shortcode is placed, to display a thumbs-up icon button and likes count.
<?php add_shortcode('aj_likes_btn', 'aj_likes_btn'); function aj_likes_btn(){ global $post; $post_id = $post->ID; $current_count = get_post_meta( $post_id, 'likes',true); $current_count = $current_count ? $current_count : 0; ob_start(); ?> <div class='aj_likes'> <p><a class='aj_thumbsup' href='' data-id='<?php echo $post_id;?>'> <i class="far fa-thumbs-up"></i></a> Likes (<span><?php echo $current_count;?></span>)</p> </div> <?php return ob_get_clean(); }
Adding AJAX functionality
This JQuery code can be added to existing javascript file ( in which case the AJAX url must be updated to correct ajax url) or save into a new javascript file called aj_script.js
jQuery(document).ready(function($){ $('body').on('click','.aj_thumbsup',function(event){ event.preventDefault(); // stop click from refreshing page var OBJ = $(this); if(OBJ.hasClass('recorded')) return; // stop multiple submissions var id = $(this).data('id'); // get post ID var data_arg = {}; data_arg['id'] = id; data_arg['action'] = 'aj_like_post'; // ajax hook name $.ajax({ beforeSend: function(){}, type: 'POST', url:the_ajax_script.ajaxurl, // Must be updated if adding this to existing data: data_arg,dataType:'json', success:function(data){ OBJ.siblings('span').html( data.new_count); // populate with new new_count OBJ.addClass('recorded') // mark as thumbsup recorded OBJ.find('i').removeClass('far').addClass('fas'); // make thumbs up icon solid } }); }); });
To enqueue the above script use this PHP code, which goes into function.php. Make sure to replace THEME_DIR with correct location if you are saving the javascript code to a different location.
<?php define("THEME_DIR", get_template_directory_uri()); wp_enqueue_script( 'aj_script', THEME_DIR . '/aj_script.js', array( 'jquery' ), 1.0, true ); wp_localize_script( 'aj_script', // the handle name of the script 'the_ajax_script', apply_filters('aj_script_data', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) , 'postnonce' => wp_create_nonce( 'aj_nonce' ) )) );
PHP code to process the AJAX request which would record the new incremented like count for the post.
<?php add_action( 'wp_ajax_aj_like_post', 'aj_record_like_post' ); add_action( 'wp_ajax_nopriv_aj_like_post', 'aj_record_like_post' ); // nopriv allows for nonloggedin users to like as well public function aj_record_like_post(){ $post_id = sanitize_text_field( $_POST['id']); $current_count = get_post_meta( $post_id, 'likes',true); $current_count = $current_count ? $current_count : 0; $new_count = $current_count + 1; // add one more like update_post_meta( $post_id, 'likes', $new_count); // save new count to the post meta echo json_encode(array( 'status'=>'good', 'new_count'=>$new_count, )); exit; }
CSS code to stylize the looks.
.aj_likes{text-align:center; padding:30px 0; font-size:18px;} .aj_likes a:hover i{transform: scale(1.2);} .aj_likes a.recorded:hover i{transform: scale(1);}
Now add the shortcode [aj_likes_btn] where ever you want viewers to like that post, and it will look like this on the post. If you like this code share, be sure to give my like button a smashing as well 🙂
1 month ago
My First 38 Hour Upavasa (Fast)
What I Knew About Upavasa Fasting also known as Upavasa (in Sanskrit), was practiced long ago in ancient yogic traditions. Gautum Buddha went on periods of intense Upavasa in search…
4 months ago
DIY Backyard Solar Panel Stand
I have always been fascinated with using alternate methods to generate power to run day-to-day machines. There is nothing better than using the sun's power to generate electricity, which gives…
9 months ago
What You Said is Very Disrespectful
How many times did someone say something and you felt it was disrespectful or it was respectful? It is kind of a learned thing isnt it? What is respectful and…
1 year ago
Courage To Be By Ourselves
I wanted to explore and write about the power of being alone by ourselves, in light of the passing away of a dear friend I knew from high school. When…
1 year ago
Educated People Have Caused More Destruction, Than Those Who Are Not
I once saw in a small village in Sri Lanka where people live bare minimum very close to nature. No plastic, no processed foods, no fad diets, no exercise regime,…
2 years ago
How I recovered from .htaccess attack on WordPress install
.htaccess attacks are very frustrating, period! I wanted to write this to share the numerous methods and techniques I used to recover my websites from a recent .htaccess attack. This…
2 years ago
Procrastination
If you are procrastinating something, that means obviously you don’t like what you have to do. If you like what you have to do, you wouldn’t stop doing it, wouldn't…
2 years ago
10 Amazing Books that Rocked My Ship in 2022 and More
2022, I found myself moving deeper toward the inner layers of existence away from scientific theories and applications of rat experiments into human behavior. I found myself going deeper into…
2 years ago
Super Charging The Roti
Coconut roti made with flour, coconut, salt, and water is a very easy-to-make staple in Sri Lankan cuisine. It has become something I quite enjoy - eating with Pol sambal…
2 years ago
Interfaces From Past
Our souls are so amazing that they can create amazing interfaces at the point of discomfort or struggle to protect ourselves from further pain and from future pain. In those…
3 years ago
Do our desires for pleasures own us in this modern world?
I think when sages said staying with pain opens doors to greater wisdom and consciousness and that we shouldn't chase after pleasure. - what they meant is: life is fundamentally…