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.

2 Answers
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.

Leave a Comment