I'm trying to tweak a love it plugin (by Daniel Pataki) which basically uses Ajax to update post meta when viewing single.php - all works fine when applying the funtionality on a single post view but I am looking to achieve this same functionality when viewing a custom page template that lists multiple posts in a foreach query.

So 5 posts listed with title, love count and increase love count button within a foreach, and I want to target just the selected post and update that individual posts meta on click

However, when updating the meta on any of my posts listed it's only applying it to the first post in the the query

The main plugin file Ajax-test.php

add_action( 'wp_enqueue_scripts', 'ajax_test_enqueue_scripts' );
function ajax_test_enqueue_scripts() {
if( is_single() ) {
    wp_enqueue_style( 'love', plugins_url( '/love.css', __FILE__ ) );

wp_enqueue_script( 'love', plugins_url( '/love.js', __FILE__ ),    array('jquery'), '1.0', true );

wp_localize_script( 'love', 'postlove', array(
    'ajax_url' => admin_url( 'admin-ajax.php' )

add_action( 'wp_ajax_nopriv_post_love_add_love', 'post_love_add_love' );
add_action( 'wp_ajax_post_love_add_love', 'post_love_add_love' );

function post_love_add_love() {
$love = get_post_meta( $_REQUEST['post_id'], 'post_love', true );
update_post_meta( $_REQUEST['post_id'], 'post_love', $love );
if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) { 
    echo $love;
else {
    wp_redirect( get_permalink( $_REQUEST['post_id'] ) );

The Jquery plugin file - love.js

jQuery( document ).on( 'click', '.love-button', function() {
var post_id = jQuery(this).data('id');
    url : postlove.ajax_url,
    type : 'post',
    data : {
        action : 'post_love_add_love',
        post_id : post_id
    success : function( response ) {
        jQuery('#love-count').html( response );

return false;

And here is my page template which lists 5 posts within a while have.

 <?php get_header(); ?> 
 <div id="blog">
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <div class="post"> 
       <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ? >   </a></h1>
       <div class="entry">  
            <?php the_content(); ?>


global $post;
$events = get_posts('numberposts=5');
foreach($events as $event) :
<li><?php echo get_the_title($event->ID); ?></li>

<?php $love = get_post_meta( $event->ID, 'post_love', true );
  $love = ( empty( $love ) ) ? 0 : $love;

  $love_text = '<p class="love-received"><a class="love-button"   href="' . admin_url( 'admin-ajax.php?action=post_love_add_love&post_id=' . $event->ID ) . '" data-id="' . $event->ID . '">give   love</a><span id="love-count">' . $love . '</span></p>'; ?>

       <?php echo $content . $love_text; ?> 

<?php endforeach; ?>



<?php endwhile; ?>
<?php endif; ?>

A couple of problems-

setup_postdata doesn't work with any variable other than $post, so that line is doing nothing. This is explained on the Codex page for setup_postdata.

get_the_ID doesn't accept any arguments, but it doesn't matter, you've already got the ID in $event->ID, just change all instances of get_the_ID($event->ID) to $event->ID.

  • Hi Milo, just tried that and it broke the page - giving me a blank white Jun 20 '17 at 15:02
  • You should enable debugging and look at the error messages, you've made a syntax error.
    – Milo
    Jun 20 '17 at 15:03
  • Do I need to amend the main ajax-test.php file and love.js file as well? I made the edits you suggested to the post list template only. Jun 20 '17 at 15:04
  • Okay thanks, so close! I'll carry on trying to work this one out. Jun 20 '17 at 15:07
  • I cant figure this one out. I've tried enabling debugging too but cant see results, I know there must be a syntax error but strange how displayed fine before i made your edits Jun 20 '17 at 15:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.