How To Add Likes to Posts in WordPress (Without a Plugin)

There are countless plugins out there to add likes to posts in WordPress, however, a lot of them are bloated with features you’ll never use. The problem is that all the extra code, especially the JavaScript that gets loaded on every page, will slow your site down.

In the following tutorial, I’m going to show you how to make your very own “like counter” for your posts with HTML, CSS and PHP.

If you’d like an AJAX version (where the page doesn’t have to reload), please leave me a comment below!

Quick Links

1.) The HTML

To start off let’s build the HTML structure of the two like buttons. In my example, I’m editing the Twenty Sixteen default WordPress theme. If you’re following along but using your own theme, all of the below still applies, you’ll just have the tweak your CSS in places.

First, we create a function called ip_post_likes() which accepts one parameter of $content.

function ip_post_likes($content) {
}

This function checks if we’re viewing a post. If we didn’t run the check, this would show up anywhere the_content(); is called, like a page for example.

if(is_singular('post')) {
}

Next, we use something called output buffering. All this does is say “assign anything inside the buffer to a variable”. We start the buffer with ob_start(); and end it with ob_get_clean();, which also assigns the output to the variable. In this case, the variable is called $output.

Then we concatenate our $output and $content variables. When using the filter the_content, the variable$content is just the post content that will be output to the page. By concatenating them our like buttons will be placed right before any of the post content.

return $output . $content;

The last thing we do for our function is add an else statement to say “if this isn’t a post, just output the content normally”. If we didn’t do this all other post types would have no content.

The only thing that might stump you if you’re new to CSS is how I apply margins to list items.

The reason I use :not(:last-child) is that it’ll add that margin to every element, except the last one. This is helpful and more useful than using left margin if your list starts to wrap at a certain breakpoint.

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

Here’s what it should look like with the CSS…

3.) The PHP

Now for the meat of this tutorial, the PHP code that makes the magic happen!

First, we need to create a function to get the likes and dislikes from the post. We won’t be using the function right away, but we’ll need it in the next few bits of PHP we write.

The function is quite simple, all it does it get the current like or dislike count from the database. If there are no likes or dislikes to be found, we can assume the number is 0.

You’ll see the function takes an argument of $type. All this means is the name of the post meta field we’ll be creating momentarily. The function defaults to finding “likes”.

Other than our functionip_get_like_count(), we’re also using the functionadd_query_arg(). This just takes the current URL and adds a query string on the end. For example, on my localhost setup where WordPress is installed in the directory/wordpress/, the URL would be /wordpress/2018/08/02/hello-world/?post_action=like.

<?php echo add_query_arg('post_action', 'like'); ?>

The next function we need to create is the one to actually process the like by updating the post meta.

I’m sure that looks a bit much to take in all at once, so let’s break it down.

We first create two variables, $processed_like and $redirect. By setting them to false at the very top of the function, we can rely on them being false until we actually do something to make them true.

After that we write some basic code in each part of the if/else statement that says “get the current post meta likes, if there are some, add 1, if not, start at 1”. The same logic applies to both parts, we just change out “likes” for “dislikes” in the else statement.

We also update the meta using the functionupdate_post_meta(). I usually prefer using this over add_post_meta() because, if there’s no meta in place, update_post_meta() will add it anyway.

Now we check if $processed_like is true. If the post meta updated, then it will be true, because update_post_meta() returns true on success. If it is true, we set the current permalink as the redirect.

The reason we have to do a redirect is that if we didn’t and just loaded the page with ?post_action=like still in the URL, if the user copied that URL or simply refreshed the page, it would add another like.

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

Lastly, we actually run the redirect, which only happens if the variable$redirect is true.

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

To make this code actually work we’re running it with the actiontemplate_redirect, which runs before WordPress chooses the template for the current screen.

add_action('template_redirect', 'ip_process_like');

4.) Final Code

Thanks for following along with the tutorial and I hope it’s been helpful to you!

If you’ve got any questions about the above, please leave a comment below and I’ll get back you in anyway I can.

Comments (5)

Fernando Giroto

Aaryan Sharma

—6th, Aug 2019 at 12:08 pm

Thank you so much for this, i tweaked the php code so that the like/dislike buttom come at the bottom of the post but that was very easy. Changed the css to my liking and it works perfectly. I usually don’t comment but you deserve it! Great work.

Phuong

Fernando Giroto

Benila

—17th, Apr 2019 at 8:30 am

Hi Thanks for uploading the above code. I used this code but the likes and dislikes buttons are not working. It’s shows exactly like your picture but clicking not counting and saving. I am using DIVI theme. Could you please help me to fix this.