1

So I have this code that's using jQuery on click. It fills the heart: https://jsfiddle.net/69ww31n3/

Here's where I'm struggling, I want when the heart is clicked it would add_post_meta key 'heart' with a value 1.

Then when someone else clicks, it would update_post_meta to +1.

Its sounds simple, but I'm struggling all day with this.

Any help would be appreciated.

2
  • 1
    So you probably need a REST API endpoint or an admin_ajax handler on the server to call that actually updates the post meta, and then you have your jQuery call that. I don't think any of the built-in REST API would just work for this. How are you going to protect against one user spamming the heart button?
    – Rup
    Sep 6, 2023 at 22:44
  • 1
    I'd probably find a few existing likes plugins and have a look how they handle this.
    – Rup
    Sep 6, 2023 at 22:46

1 Answer 1

4

WordPress Ajax to the rescue! You'll need to open up a function in WordPress that can be called via a javascript function, which is what the WP Ajax API was built for. It's a bit of a multi-step process, but is quite powerful once you have it setup.

There's a helpful article here that explains the overall concept of what you're trying to accomplish, but the basics are:

  1. Expose admin-ajax.php to the front-end of your website, so your new script can hit it. Load something like the following in your theme's functions.php:
function add_ajax_scripts() {
    wp_enqueue_script( 'ajaxcalls', get_template_directory_uri() . '/js/ajax-calls.js', array(), '1.0.0', true );
    wp_localize_script( 'ajaxcalls', 'ajax_object', array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'ajaxnonce' => wp_create_nonce( 'ajax_post_validation' )
    ) );
}

add_action( 'wp_enqueue_scripts', 'add_ajax_scripts' );
  1. Create a function that will hit this endpoint and update the data you pass, again adding this to functions.php:
function increment_post_hearts() {
    $post_id = $_POST['post_id'];
    $current_hearts = get_post_meta( $post_id, 'heart');
    update_post_meta( $post_id, 'heart', $current_hearts++ ); //adds one to the heart count
    wp_die();
}

add_action( 'wp_ajax_nopriv_increment_post_hearts', 'increment_post_hearts' );

IMPORTANT: Note the "nopriv_" in the add_action call above. This lets users who are NOT logged in use the function. If instead you want only logged in users to hit this endpoint, remove the "nopriv_". Rup's comment on your initial question is very valid, as you may need to sort out how to prevent a user from hitting this more than once (if desired)

  1. Create the javascript that will actually run this function on a user's click. Create a /js directory in your theme and add a file called "ajax-calls.js" with the following code (adjust to your use-case):
jQuery(document).ready( function($) {
    $('.class_of_your_heart_button').on('click', function() {
        var post_id = $(this).attr( 'id' );
        $.ajax({
            type: 'POST',
            url: ajax_object.ajaxurl,
            data: {
                action: 'custom_update_post',
                post_id: post_id
            }
        });
    });
});
  1. Finally, your button code for the front-end heart button should look something like the following:

<button id="<?php echo get_the_ID(); ?>" class="class_of_your_heart_button"> Click To Update </button>

Clicking on the button should fire the javascript call, passing in the post ID you'd like to +1 the heart count of. Your implementation may need some adjustments, but this should get you most of the way there.

1
  • 2
    This IS the answer right here. You can also send back a JSON success message if you are displaying the like count in the heart or next to the heart. Sep 6, 2023 at 23:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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