Skip to content

Instantly share code, notes, and snippets.

@shizhua
Last active September 25, 2023 12:48
Show Gist options
  • Save shizhua/3075a9538566f1dbd453 to your computer and use it in GitHub Desktop.
Save shizhua/3075a9538566f1dbd453 to your computer and use it in GitHub Desktop.
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;
}
@mdsabir07
Copy link

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