How to use AJAX to call a function in WordPress
This might be old stuff for many people out there and I know that most things can be accomplished with the amazing WP API, still I think it's good to have a simple example of using AJAX to call a WordPress function in one post. Here we go!
Scenario: #
You want to request some data from WordPress (e.g. the previous post ID), through an AJAX call.
How to do this: #
The way I solved this was to add a global variable in the header, so that the WordPress AJAX URL is exposed. Then I added a function in my theme's function.php file, which would do the actual work. Finally, in my JavaScript file it's just a matter of calling my function with AJAX. I can then use the result to do what I need.
In header.php #
<script>
var ajaxurl = "' . admin_url('admin-ajax.php') . '";
</script>
In function.php #
function get_prev_ajax_handler() {
// this is how you get access to the database
global $wpdb;
// get the id value which has been posted
$post_id = intval( $_POST['id'] );
// Get a global post reference
global $post;
// Get the post object for the specified post
$post = get_post( $post_id );
// Echo the previous post ID
echo get_previous_post()->ID;
// close the connection
wp_die();
}
add_action('wp_ajax_get_prev', 'get_prev_ajax_handler');
add_action( 'wp_ajax_nopriv_get_prev', 'get_prev_ajax_handler' );
In script.js #
function getPrevPostId(id){
var prevPostId;
$.post( ajaxUrl, {
action: "get_prev",
id: id
}, function(prevPostId) {
console.log(prevPostId)
});
}
Photo by Lee Roylland on Unsplash