[Ajax][WordPress] Finding post ID dynamically on click


Goal: I’m making a portfolio website in WordPress. It’s the first time that I have setup a WordPress page by myself (I have done on internship but those were template-ish). I have seen this website that uses (what I think) Ajax to load its contents to the page. So for good practice I want to make myself one on the hardway. Until now with all the research I have learned more about wp_query and things, but not enough to fix this.

Problem🙁 I have changed my code before I posted this so it could be different again) I am a newb to ajax since this is my first time trying it. I have gathered information all around google and tried to mix it up with my code with my logic. I kinda understand things now but I really wouldnt know how I could get it to focus on the post ID i have clicked on. If I click on one of the posts now, it will retrieve all of the links if I do the_permalink(). I want the function to know which post it is clicking on so I can put the right content into the text-area in my html.
I have tried ways to get the url with Jquery and turn it into the ID but that would need PHP again. I know that you can search up the post ID per page but that would hard code it right? I want it dynamic so if I make a new page it wouldnt need me to assign that ID via my editor. I’m really confused right now. I am trying to do this since 29/06/2019 (europe).

Here is my code for the Ajax. My site is live on kutuk.nl.
if you need more code just tell me, Excuse me for the English its not my native language.


(function($) {

$(document).on( 'click', '.nav-link', function( event ) {

    var event = $(this).attr('href');
        url: ajaxpagination.ajaxurl,
        type: 'POST',
        data: {
            action: 'ajax_pagination',
        success: function(data) {
            history.pushState(null, null, event);
            $( '.text-zone' ).html( data );


add_action( 'wp_ajax_nopriv_ajax_pagination', 'my_ajax_pagination' );
add_action( 'wp_ajax_ajax_pagination', 'my_ajax_pagination' );
function my_ajax_pagination()

    $query_vars = json_decode( stripslashes( $_POST['query_vars'] ), true );

$query_vars['paged'] = $_POST['page'];

$posts = new WP_Query( $query_vars );
$GLOBALS['wp_query'] = $posts;

if( $posts->have_posts() ) :
while( $posts->have_posts() ):
    $posts->the_post(); ?>

    <?php endwhile;

Localize the script

wp_localize_script( 'ajax-pagination', 'ajaxpagination', array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'query_vars' => json_encode( $wp_query->query ),

NOTE- I know that I havent used the query_vars in the localize_script but I am too confused right now. And that pagination probably is not the best naming for what I want( it was from a tutorial website).

Read more here:: [Ajax][Wordpress] Finding post ID dynamically on click

Leave a Reply

Your email address will not be published. Required fields are marked *