How to use AJAX to call a function in WordPress

Posted on Tuesday, July 12th, 2016

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



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)
    });
}