Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Add a like button without a plugin in WordPress
add_action( 'wp_enqueue_scripts', 'pt_like_it_scripts' );
function pt_like_it_scripts() {
if( is_single() ) {
wp_enqueue_style( 'like-it', trailingslashit( plugin_dir_url( __FILE__ ) ).'css/like-it.css' );
if (!wp_script_is( 'jquery', 'enqueued' )) {
wp_enqueue_script( 'jquery' );// Comment this line if you theme has already loaded jQuery
}
wp_enqueue_script( 'like-it', trailingslashit( plugin_dir_url( __FILE__ ) ).'js/like-it.js', array('jquery'), '1.0', true );
wp_localize_script( 'like-it', 'likeit', array(
'ajax_url' => admin_url( 'admin-ajax.php' )
));
}
}
add_action( 'wp_ajax_nopriv_pt_like_it', 'pt_like_it' );
add_action( 'wp_ajax_pt_like_it', 'pt_like_it' );
function pt_like_it() {
if ( ! wp_verify_nonce( $_REQUEST['nonce'], 'pt_like_it_nonce' ) || ! isset( $_REQUEST['nonce'] ) ) {
exit( "No naughty business please" );
}
$likes = get_post_meta( $_REQUEST['post_id'], '_pt_likes', true );
$likes = ( empty( $likes ) ) ? 0 : $likes;
$new_likes = $likes + 1;
update_post_meta( $_REQUEST['post_id'], '_pt_likes', $new_likes );
if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) {
echo $new_likes;
die();
}
else {
wp_redirect( get_permalink( $_REQUEST['post_id'] ) );
exit();
}
}
.pt-like-it {
display: inline-block;
position: relative;
height: 38px;
line-height: 38px;
padding: 0 16px;
outline: 0;
color: #57ad68;
background: rgba(0,0,0,0);
font-size: 14px;
text-align: center;
text-decoration: none;
cursor: pointer;
border: 1px solid #a9d8b2;
vertical-align: bottom;
white-space: nowrap;
text-rendering: auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box;
border-radius: 999em;
letter-spacing: -0.02em;
font-weight: 400;
font-style: normal;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga" on;
}
.pt-like-it:hover,
.pt-like-it:hover a {
border-color: #57ad68;
color: #468c54;
}
.pt-like-it > a.like-button {
border: none;
}
.pt-like-it .like-button:before {
font: normal normal normal 14px/1 FontAwesome;
content: '\f087';
margin-right: 3px;
}
.pt-like-it .like-count {
padding-left: 10px;
}
jQuery( document ).on( 'click', '.pt-like-it', function() {
var post_id = jQuery(this).find('.like-button').attr('data-id'),
nonce = jQuery(this).find('.like-button').attr("data-nonce");
jQuery.ajax({
url : likeit.ajax_url,
type : 'post',
data : {
action : 'pt_like_it',
post_id : post_id,
nonce : nonce
},
success : function( response ) {
jQuery('#like-count-'+post_id).html( response );
}
});
return false;
})
add_filter( 'the_content', 'like_it_button_html', 99 );
function like_it_button_html( $content ) {
$like_text = '';
if ( is_single() ) {
$nonce = wp_create_nonce( 'pt_like_it_nonce' );
$link = admin_url('admin-ajax.php?action=pt_like_it&post_id='.$post->ID.'&nonce='.$nonce);
$likes = get_post_meta( get_the_ID(), '_pt_likes', true );
$likes = ( empty( $likes ) ) ? 0 : $likes;
$like_text = '
<div class="pt-like-it">
<a class="like-button" href="'.$link.'" data-id="' . get_the_ID() . '" data-nonce="' . $nonce . '">' .
__( 'Like it' ) .
'</a>
<span id="like-count-'.get_the_ID().'" class="like-count">' . $likes . '</span>
</div>';
}
return $content . $like_text;
}
@rhtyaduvanshi

This comment has been minimized.

Copy link

@rhtyaduvanshi rhtyaduvanshi commented Jan 22, 2020

Very good code, thanks for help me, but i facing only one issue, if user click on same button multiple times then likes is increasing i need only one person like one post at a time.

@YuvrajKhavad

This comment has been minimized.

Copy link

@YuvrajKhavad YuvrajKhavad commented Sep 29, 2021

Hey Man, Thank you for this solution.

@mdsabir07

This comment has been minimized.

Copy link

@mdsabir07 mdsabir07 commented Nov 26, 2021

Hi, how can I use it on the post on any page and blog page?
I've to try both (js and PHP functions ajax). But I got the error.

Please, share provide instruction on where the should be put the code and functions.

Many thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment