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
|
1 2 3 |
<script> var ajaxurl = "' . admin_url('admin-ajax.php') . '"; </script> |
In function.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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
|
1 2 3 4 5 6 7 8 9 |
function getPrevPostId(id){ var prevPostId; $.post( ajaxUrl, { action: "get_prev", id: id }, function(prevPostId) { console.log(prevPostId) }); } |
0