Ajax Load More Pagination and Infinite Scroll plugin for WordPress

The WP Ajax Load More Pagination and Infinite Scroll plugin modifies the standard WordPress pagination. After activating and configuring the plugin, the pagination pages will be loaded without reloading the page.

Features

• Ajax pagination;
• “Load more” button;
• “Load more” button and pagination;
• Infinite scroll;
• Customisable styles.

Configuring the plugin

To make ajax pagination work, you need to add the following CSS selectors to the plugin settings:

• class or block ID that wraps posts, products, etc.;
• class or block ID that wraps links to pagination pages.

How to find out the css selector.

The ID or class can be found, for example, in Google Chrome by right-clicking on pagination.

Most likely the child element of the pagination will be selected.

You need the class of the parent element.

If you are using a class, you need to add a point ' . ' , if id - then '#'. In this example, the following selector will be used:  .wp-pagenavi

For WooCommerce:

Posts Selector:   .products.columns-3 or .products.columns-4 depending on how many products are in a row.

Navigation Selector:   .woocommerce-pagination

In the same way, we are looking for a container class that wraps the elements we need, in this case, my blog posts.

Google Сhrome highlights the selected block. We need all posts to be highlighted, and nothing more.

The plugin settings for my blog look like this:

You can also add js code that will be executed after ajax post loading.