How to load custom post archives sub-pages with ajax?

I'd like to keep the pagination links for /page/2/, /page/373/, etc but instead of changing the URL on the browser i want everything to load on the archive main page.

Ideally all those paginated URLs should redirect to the first page of the archive.

I don't want a "load more" button i want to keep the logic of pages but load them via ajax keeping url unchanged.

How can i do this? Any help is appreciated.

I'd like to keep the pagination links for /page/2/, /page/373/, etc but instead of changing the URL on the browser i want everything to load on the archive main page.

Ideally all those paginated URLs should redirect to the first page of the archive.

I don't want a "load more" button i want to keep the logic of pages but load them via ajax keeping url unchanged.

How can i do this? Any help is appreciated.

• custom-post-types
• ajax
• pagination

Share Improve this question asked Feb 7, 2019 at 10:03 Michael RogersMichael Rogers 54988 silver badges3737 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

you might use the $.load and preventDefault() from jQuery.

Assugming that you have .page-link link class on each url in pagination and you have all the posts in the #content div following code can help you to load the posts in that div on that particular page.

$("body").on("click", "a.page-link", function(e) {
    e.preventDefault();
    $("#content").load($(this).attr("href") + " #content");
});

This will replace the current posts in that page with the new posts from that particular page. A look on your div structure might help me to write the complete code for you which can work on your site.

Very high Level:

• Via Javascript register an eventhandler for clicking on pagination links
• Utilize preventDefault so users with Javascript disabled still get the old behavoiur
• In the eventhandler make an ajax request that sends the kind of archive(ie.: for author xy) and the number of the page that should be shown (You can get both values from the link url) to your Wordpress ajax url
• In the PHP function triggerd by your request, make a new query for posts of this archives(ie.: post from author xy)
• Additionally use Pagination Parameters to select the right page
• Once you have your query data, render your archives page just like in your archive.php, you can use template parts and theme functions

• Kill your backend process with die()

• Back on the frontend, take the markup the ajax request returned and replace your old markup

This approach has the advantage, that your markup gets rendered the same way as your normal archive page.

You could also try to accomplish this by making a call to the Wordpress REST API, but you would have to take care of templating in Javascript.

If you need more details on a certain step, just ask.