Skip to content

Instantly share code, notes, and snippets.

@cfxd
Last active August 29, 2015 14:08
Show Gist options
  • Save cfxd/3a24d49a422dbb01854c to your computer and use it in GitHub Desktop.
Save cfxd/3a24d49a422dbb01854c to your computer and use it in GitHub Desktop.
AJAX Requests with Native WordPress Features. See http://cfxdesign.com/ajax-requests-with-native-wordpress-features
<?php
function localize_ajax_variables() {
wp_localize_script('your_js', 'wp_ajax_vars', array(
'admin_url' => admin_url('admin-ajax.php')
));
}
add_action('wp_enqueue_scripts', 'localize_ajax_variables', 999);
var theForm = '#heart > form';
function likeUpdated(data) {
$(theForm).find('.fa-refresh').removeClass('fa-spin fa-refresh').addClass('fa-heart');
$('.likes').text(data.likes);
$(theForm).find('button').removeAttr('disabled');
}
$(function() {
var options = {
url: (typeof wp_ajax_vars !== 'undefined') ? wp_ajax_vars.admin_url : '',
dataType: 'json',
data: {
action: 'update_likes_ajax'
},
success: likeUpdated
};
$(document).on('submit', theForm, function(e) {
// $(this).find('button').attr('disabled', 'disabled');
// $(this).find('.fa-heart').removeClass('.fa-heart').addClass('fa-refresh fa-spin');
$(this).ajaxSubmit(options);
e.preventDefault();
});
});
<?php
function update_likes() {
if(!empty($_POST['like_nonce'])) {
if(defined('DOING_AJAX') && DOING_AJAX) {
check_ajax_referer('like-nonce', 'like_nonce', true);
} elseif(!wp_verify_nonce($_POST['like_nonce'], 'like-nonce')) {
wp_redirect($_POST['redirect']);
exit;
}
$likes = get_post_meta($_POST['post'], '_post_likes', true);
if(!is_numeric($likes)) {
$likes = 0;
}
$likes += 1;
update_post_meta($_POST['post'], '_post_likes', $likes);
if(defined('DOING_AJAX') && DOING_AJAX) {
echo json_encode(array('likes' => $likes));
die();
}
wp_redirect($_POST['redirect']);
exit;
}
}
add_action('init', 'update_likes');
add_action('wp_ajax_update_likes_ajax', 'update_likes');
add_action('wp_ajax_nopriv_update_likes_ajax', 'update_likes');
<?php
function update_likes() {
if(!empty($_POST['like_nonce'])) {
if(!wp_verify_nonce($_POST['like_nonce'], 'like-nonce')) {
wp_redirect($_POST['redirect']);
exit;
}
$likes = get_post_meta($_POST['post'], '_post_likes', true);
if(!is_numeric($likes)) {
$likes = 0;
}
$likes += 1;
update_post_meta($_POST['post'], '_post_likes', $likes);
wp_redirect($_POST['redirect']);
exit;
}
}
add_action('init', 'update_likes');
<div class="post-like" id="heart">
<form method="post">
<?php $likes = get_post_meta(get_the_ID(), '_post_likes', true); ?>
<input type="hidden" name="like_nonce" value="<?php echo wp_create_nonce('like-nonce'); ?>">
<input type="hidden" name="post" value="<?php the_ID(); ?>">
<input type="hidden" name="redirect" value="<?php echo get_the_permalink().'#heart'; ?>">
<span class="likes"><?php echo empty($likes) ? '' : $likes; ?></span>
<button type="submit">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-heart fa-stack-1x fa-inverse"></i>
</span>
</button>
</form>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment