By Michael Rogers


2019-02-07 10:03:57 8 Comments

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 comments

@M Haseeb 2019-02-12 15:37:33

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.

@Michael Rogers 2019-02-23 15:10:11

Works perfectly! Only had to put it inside a function.

@M Haseeb 2019-02-26 10:41:02

great. glad that it helped.

@mtthias 2019-02-10 11:26:53

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.

Related Questions

Sponsored Content

1 Answered Questions

Ajax page load without reload

  • 2013-12-11 07:33:52
  • madmanali93
  • 5781 View
  • 0 Score
  • 1 Answer
  • Tags:   ajax javascript

0 Answered Questions

Ajax load more posts with Ajax taxonomy filter

1 Answered Questions

[SOLVED] Ajax Load More on Hierarchical Categories

0 Answered Questions

How to load paginated post pages via ajax

0 Answered Questions

Ajax - Post Categories and Load More

2 Answered Questions

1 Answered Questions

[SOLVED] Load page content with AJAX using Fancybox?

  • 2014-01-09 22:46:52
  • user2558393
  • 16459 View
  • 0 Score
  • 1 Answer
  • Tags:   ajax

2 Answered Questions

[SOLVED] Load page HTML content through AJAX

  • 2013-08-27 14:49:14
  • Rob Leach
  • 7750 View
  • 0 Score
  • 2 Answer
  • Tags:   ajax javascript

2 Answered Questions

[SOLVED] How to filter a static post page with ajax and $wp_query

Sponsored Content