Count WordPress Post view onClick using AJAX

Question

How can I count post views of my WordPress posts when click on a button using AJAX?

Currently it's counting the post view whenever I refresh the page, I want to call tha funtion with ajax.

Please check the code I am currently using to show post view count

Inside the functions.php

if ( ! function_exists( 'count_views' ) ) :    
// Get the value of view
function count_views($postID) {   
    
    $count_key = 'wpb_post_views_count';    
    $count = get_post_meta($postID, $count_key, true);    
    
    if($count ==''){
        $count = 1;        
        delete_post_meta($postID, $count_key);        
        add_post_meta($postID, $count_key, '1');    
    } else {        
        $count++;        
        update_post_meta($postID, $count_key, $count);    
    }
}
endif;

Then on single.php I have called the funtion count_views with get_the_ID();

<?php count_views(get_the_ID()); ?>

To retrieve the view count I have used:

<li>
<i class="fa fa-eye"></i>                            
<?php
if (get_post_meta(get_the_ID(), 'wpb_post_views_count', true) == '') {
    echo '0';
} else {
    echo get_post_meta(get_the_ID(), 'wpb_post_views_count', true);
};
?>                             
</li>

How can I call the count_views(get_the_ID()) funtion using javascript Ajax call.

cngodles · Accepted Answer · 2021-11-22 18:37:45Z

1

You'll need to add actions to your functions.php file for WordPress. You can then designate callback functions that return the data you are looking for. PHP code below:

// You add two actions here, so it can be accessed from outside the WP CMS
add_action( 'wp_ajax_project_get_post_count', 'project_get_post_count_callback' );
add_action( 'wp_ajax_nopriv_project_get_post_count', 'project_get_post_count_callback' );

function project_get_post_content_callback() {

  if(!empty($_POST['ID'])){
    $postID == $_POST['ID'];
    $count_key = 'wpb_post_views_count';    
    $count = get_post_meta($postID, $count_key, true);
    $response['views'] = $count;
    if($response['views'] ==''){
        $response['views'] = 0;
    }
    wp_send_json( $response );
  }
}

Once you have that setup, in javascript you need to do an AJAX post, passing the action name using the action attribute in POST. This below will get you mostly there. You'll need to format it correctly to be able to get your data. This example is also in jQuery, vanilla JS will be different. JS code below:

$.ajax({
    type: 'POST',
    url: ajaxfullurl,
    data: {
        'action': 'project_get_post_count',
        'ID':<YOURIDHERE>
    }
});

The last piece you'll need is the AJAX URL (ajaxfullurl). WordPress provides a way to get that. This is the PHP code that you'll need to extract the URL for AJAX calls on your WordPress website.

echo admin_url('admin-ajax.php');

answered Nov 22, 2021 at 18:37

cngodles

4386 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rajot Das Over a year ago

Hi cngodles! Thanks for the answer, it solved the problem :)

cngodles Over a year ago

Excellent. I did notice that I messed up the function name project_get_post_content_callback(), it should be project_get_post_count_callback().

Collectives™ on Stack Overflow

Count WordPress Post view onClick using AJAX

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related