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!

<?php
	//---- Add buttons to top of post content
	function ip_post_likes($content) {
		// Check if single post
		if(is_singular('post')) {
			ob_start();

			?>
				
			<?php

			$output = ob_get_clean();

			return $output . $content;
		}else {
			return $content;
		}
	}

	add_filter('the_content', 'ip_post_likes');

	//---- Get like or dislike count
	function ip_get_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 ip_process_like() {
		$processed_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;
					}

					$processed_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;
					}

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

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

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

	add_action('template_redirect', 'ip_process_like');
?>

The CSS for the buttons is quite basic as there’s not a lot of HTML to style in the first place. Here’s what the finished CSS looks like:

.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;
}

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. Thanks to inspirationalpixels.com

Wordpress

Tagged in:

,