1

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.

1

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.

  • Works perfectly! Only had to put it inside a function. – Michael Rogers 14 hours ago
4
+25

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.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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