0

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. ajax.php.wordpressexplanation

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.

ajax-pagination.js

(function($) {

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

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

Functions.php

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(); ?>
        <h2>
            <?php
            the_permalink();
        ?>
        </h2>

    <?php endwhile;
    wp_reset_query();
    wp_reset_postdata();
endif;
    wp_die();
}

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).

UPDATE 14:40 04/06/2019 = I have found some kind of way to return the ID with $post_id = isset( $_POST['post_id'] ) ? $_POST['post_id'] : 'N/A'; and giving the AJAX data post_id: post_id. But the problem now is that it gives me an array array(1) { ["postId"]=> string(2) "22" }.

UPDATE 15:37 04/06/2019 = It worked I have only left the number, $post_id = isset($_POST['post_id']) ? $_POST['post_id'] : 'N/A'; echo $post_id["postId"];

UPDATE 16:01 04/06/2019 I have finally done it, apparently it was just 2 lines of code and I have spent just under a week on this. It was a journey that has learned me a lot. Thanks for the help people. If anyone needs the code I'll update this.

0

What you're looking to accomplish isn't really pagination. That threw me off initially. You're building a navigation that will be site-wide.

If that's the case, you can either capture the ID from the url (this is not very performant) or add the ID to the markup.

This example shows you how to add the ID as a data attribute on the menu's anchor tag:

function my_nav_menu_link_attributes( $atts, $item, $args ) {
        // Replace with the theme location name for your menu.
    if ( 'menu-1' === $args->theme_location ) {
        // This works for posts or pages. Add extra custom post types to include.
        if ( isset( $item->object_id ) && ( 'post' === $item->object || 'page' === $item->object ) ) {
            $atts['data-post-id'] = $item->object_id;
        }
    }
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'my_nav_menu_link_attributes', 10, 3 );

If you use this, you can grab the data attribute data-post-id for each link that's clicked.

The markup will look something like this:

<li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="/sample-page/" data-post-id="2">Sample Page</a></li>
  • Hi thanks for the answer, I am on my mobile right now and Im going to work(internship) in an hour to test it out. About the pagination: yeah I later saw the naming was wrong but that was because I didnt know what pagination was and at that time I was following a tutorial from 'wpmudev how to load ajax posts'. I appreciate the answer, i will update this soon – Kutuk Jun 4 at 5:35
  • I have put my own theme_location in and the data attributes get applied! Very nice and thanks it had give me more ideas to how I could finish it up. But right now I have spent 3 hours searching how to get the returned ID into my_ajax_pagination(). for example get_permalink( $atts), the $atts would be from your function and the permalink(or something else) would be in functions.php. But it came to my mind that wouldn't work because php wouldn't know what I have clicked on. But then.. how can I get the function to work IN AJAX? I have tried the thing with localize script. – Kutuk Jun 4 at 9:50
  • You would use js to capture the clicked link's data attribute and pass that as part of the data you're already passing in your ajax function. Once you do that, it will be available as a part of $_POST. – MikeNGarrett Jun 4 at 16:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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