I've been trying to figure this out for about a week and I've got a few different methods that 'work' but I don't feel like are the best/right solutions for the project.

I'm trying to do the following: I've got grid items that are populated via the WP Posts loop. The grid items themselves are then wrapped in an tag wherein the post ID is grabbed as a data attribute like so:

            <section class="GRIDSECTION">

                    while (have_posts()) : the_post(); 
                    $postID = get_the_ID(); 

                <a class="GRIDITEM" href="#" data-post_id='<?php echo $postID; ?>' data-post_type='POST-TYPE'>

                    <h2><?php the_title(); ?></h2>

                    <span><?php the_field('CUSTOM-CONTENT');?></span>



And then my AJAX script based on some of the reading I've done:

console.log('01 - AJAX Loaded');

$(".GRIDITEM").click(function () {

    console.log('02 - AJAX Starting');

    //var id_post = $(this).attr('post_id');
        type: 'POST',
        url: '<?php echo admin_url('admin-ajax.php'); ?>',
        data: {
            'post_id': ?????,
            'action': 'f711_get_post_content' //this is the name of the AJAX method called in WordPress
        }, success: function (result) {
            console.log('03a - SUCCESS');
        error: function () {
            console.log('03b - FAILURE');


I'm not sure how to connect pass the ID into the data type with this method. I figured once I manage to get the post_id passed in, I can do the same thing for the POST-TYPE.

What I intend to do is pass the Post ID and the Custom Post Type into Ajax to send and receive the Post that the GRIDITEM represents.

And then of course, return back to where I started.

Here's the overall feel I want to achieve.


But since we use custom post types and custom fields in each post, I'm not sure how to call that in. Plus I've only just started using AJAX.


  • 1
    This seems to me like a generic AJAX/jQuery question and as such off-topic here. Anyway jQuery's .data() method should help you with getting the post ID.
    – Michal Mau
    Commented Oct 7, 2016 at 20:31

3 Answers 3


Replace ????? with <?php echo $postID; ?>

I'm assuming your two snippets are in the same WP generated page?


You can get the post ID by using the following:

jQuerypostid = jQuery(this).attr('data-post_id');

Same you can do for post type also.


I took Andy Macaulay-Brook's snippet and expanded on it after some further research.

Here's what worked for me.


add_action( 'wp_ajax_nopriv_ajax_load_more', 'ajax_load_more' );
add_action( 'wp_ajax_ajax_load_more', 'ajax_load_more' );

function ajax_load_more(){
    //load more posts
    $post_id = $_POST["post_id"];

$query = new WP_Query( array(
    'p' => $post_id,
    'post_type' => 'any'
) );

if( $query->have_posts() ):

    while( $query->have_posts() ): $query->the_post();







and the js

console.log('ajax script ready');
$(document).on('click','.ajax-button', function(){

    var that = $(this);
    var post_id = that.data('post_id');
    var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';


        url : ajaxurl,
        type: 'post',
        //dataType: 'json',
        data : {

            post_id : post_id,
            action : 'ajax_load_more'

        error : function(response){
        success : function(response){

            $('#load_here').append( response );




I'm still trying to figure some other things out with the way the response gets parsed out, but one step at a time. This was enough to get me on to the next stage.

Thanks everyone!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.