Hey guys I have a "add to favourites" button which, when clicked on, adds a post to a list that a user can view on the page /my-enquiry-list/.

I have managed to create a widget that displays the number of favourites in the users list:

if ($favorite_post_ids):
    $c = 0;
    $i = 0;
    $favorite_post_ids = array_reverse($favorite_post_ids);
    foreach ($favorite_post_ids as $post_id) {
        if ($c++ == $limit) break;
        $i = $i+1;
echo "<div id='favourite-list'><a class='submit-small-button button' title='Favourites List' href='/my-favourites-list/'><i>" . $i . "</i> My Favourites List </a></div>";

The problem I'm having is that the user has to refresh the page in order to see the number (of favourited posts) appear on the page (using the widget above).

What I really want to achieve is when the user clicks on the "add to favourites" button, the counter in the widget above will increment without any refreshing.

Here is the code for the add to favourites button:

function wpfp_link_html($post_id, $opt, $action) {
    $link = "<a class='wpfp-link' href='?wpfpaction=".$action."&amp;postid=". esc_attr($post_id) . "' title='". $opt ."' rel='nofollow'>". $opt ."</a>";
    $link = apply_filters( 'wpfp_link_html', $link );
    return $link;

I'm completely new to all of this so please forgive me if this is an unreasonable question.

Thank you in advance I hope you can help me!


I think you something like this.

HTML Add this in widget

<a href="javascript:void(0)" id="add_my_fav">Add To Favourite<span id="favCount"></span></a>

Ajax Add this in template

<?php $nonce = wp_create_nonce('addToFav'); ?>
        url: 'http://example.com/wp-admin/admin-ajax.php',
        data: {action:"add_to_favourite", secret:"<?php echo $nonce; ?>"},
        method: 'POST',
        success: function(res){

PHP Add this in functions.php

function addToFavourite(){
   if(isset($_POST['secret']) && wp_verify_nonce($_POST['secret']))
       // Add here your code to add favourite

       // return new count value
add_action('wp_ajax_add_to_favourite', 'addToFavourite' );
add_action('wp_ajax_nopriv_add_to_favourite', 'addToFavourite' );
  • Thank you aMiT! I will give this a try and get back to you! – Jake Hope Jan 30 '17 at 10:31
  • Hey I have followed your method so far but I'm stuck with the third one "PHP Add this in functions.php". I'm using the WP Favourite Posts plugin and I'm not sure which bit of code to put in the body of the function.... Please help! – Jake Hope Jan 30 '17 at 10:57
  • There you were supposed to write code for saving favorites calls by user, meanwhile you are using plugin this code is almost useless for you. I read plugin files there is provision for the ajax but not found any similar settings or working functionality for same after installing it on my localhost. – BlueSuiter Jan 30 '17 at 12:16
  • Thank you so much for trying it out for me. So far I have had no luck. I will make sure I post something back up here if I find a working solution. – Jake Hope Jan 30 '17 at 12:28
  • I will try to make a plugin. – BlueSuiter Jan 30 '17 at 14:31

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.