JP CS Global Pagination
Article Index
JP Global Pagination for YOOtheme Pro
JP Global Pagination is a Joomla system plugin that adds seamless Load More pagination and Infinite Scroll functionality to YOOtheme Pro Dynamic Content sources.
The plugin works with both Custom Sources, such as Custom Articles and Custom Products, and Page Sources, such as Joomla Category Blog layouts. It allows website visitors to load additional content without refreshing the entire page.
Key Features
- Load additional content using a customizable Load More button.
- Automatically load more items as visitors scroll down the page.
- Supports YOOtheme Pro Custom Sources and Page Sources.
- Configurable number of items loaded per request.
- Customizable button text, style, size, width, and alignment.
- Optional remaining-item counter inside the button.
- Built-in safeguards to prevent pagination from being applied to unsupported elements.
Installation
- Log in to your Joomla Administrator dashboard.
- Go to System -> Install -> Extensions.
- Upload and install the JP Global Pagination plugin ZIP package.
- After installation, go to System -> Manage -> Plugins.
- Search for System - JP CS Global Pagination.
- Enable the plugin.
Configuration and Usage
Pagination must be configured directly on a YOOtheme Pro Item element that contains a Dynamic Content source.
- Open the required page or template in the YOOtheme Pro Builder.
- Add or select an Item element, such as:
- Grid Item
- List Item
- Panel Item
- Another supported repeating Item element
- Open the Item element's Advanced tab.
- Select the required Dynamic Content source.
- Scroll to the bottom of the Dynamic Content source configuration.
- Set JP Global Pagination (Use on Items ONLY!) to Yes.
- Configure the pagination settings.
- Save the YOOtheme Pro layout.
- Test the pagination on the frontend.
Pagination Settings
Pagination Value
The Pagination Value controls how many content items are displayed or loaded during each pagination request.
For example, setting the value to 6 displays the initial six items and loads another six items whenever pagination is triggered.
Infinite Scroll
Enable Infinite Scroll to load additional content automatically as the visitor approaches the bottom of the current item list.
When Infinite Scroll is disabled, visitors can load additional content using the configured Load More button.
Button Settings
The Load More button can be customized to match the website's design. Available options include:
- Button text
- Button style
- Button alignment
- Button width
- Button size
Show Counter
Enable the counter option to display the number of remaining items inside the Load More button.
This gives visitors a clearer indication of how much additional content is available.
Supported Dynamic Sources
JP Global Pagination supports YOOtheme Pro Dynamic Content sources that output repeating content items.
Custom Sources
- Custom Articles
- Custom Products
- Other compatible custom Dynamic Content sources
Page Sources
- Joomla Category Blog sources
- Other supported YOOtheme Pro Page Sources
Important Usage Requirements
Use Pagination on Item Elements Only
JP Global Pagination must be enabled directly on the repeating Item element.
Examples of supported Item elements include:
- Grid Item
- List Item
- Panel Item
Do not enable pagination on parent layout containers such as:
- Grid
- Row
- Section
As a safety measure, the plugin intentionally ignores pagination settings applied to parent containers or unsupported non-item elements. This prevents invalid configurations from breaking the YOOtheme Pro layout.
Unsupported Slide Elements
Do not use JP Global Pagination with JavaScript-powered slide elements such as:
- Slideshow
- Slider
The plugin appends new HTML content vertically or within a grid-based layout. Slide-based components maintain their own internal JavaScript state, item indexes, dimensions, and navigation controls.
Appending content directly to these components can cause incorrect item positioning, broken navigation, or layout instability.
Custom Source Quantity Limit
When using a YOOtheme Pro Custom Source, the native Quantity field acts as the absolute maximum number of items available to the pagination system.
For example, when the Custom Source Quantity is set to 15, JP Global Pagination can paginate through a maximum of 15 items, even when more records exist in the database.
To paginate through the complete available dataset:
- Leave the YOOtheme Pro Quantity field empty, or
- Set the Quantity field to a sufficiently high value.
The Pagination Value determines how many items are loaded per page, while the native Quantity field determines the maximum number of items that can be retrieved.
Recommended Configuration
For most YOOtheme Pro layouts, use the following starting configuration:
- Enable pagination directly on the Item element.
- Use a Pagination Value appropriate for the layout, such as 6, 9, or 12 items.
- Use the Load More button for content where visitors should control additional loading.
- Use Infinite Scroll for continuously browsed content such as article listings or product archives.
- Leave the Custom Source Quantity field empty when the entire dataset should be available.
- Test the layout on mobile, tablet, and desktop devices.
Troubleshooting
Pagination options are ignored
- Confirm that pagination is enabled on the Item element.
- Make sure it is not configured on a Grid, Row, Section, or another parent container.
- Verify that the selected element uses a valid Dynamic Content source.
- Confirm that the Joomla system plugin is enabled.
Only a limited number of items are available
- Check the Custom Source Quantity field.
- Remove the Quantity value or increase it to allow more records to be paginated.
- Confirm that enough published and accessible content exists in the selected source.
The layout breaks after loading more items
- Confirm that the plugin is not being used with a Slideshow or Slider element.
- Check whether custom JavaScript is modifying or replacing the item container.
- Test the layout using a standard Grid, List, or Panel-based structure.
The Load More button does not appear
- Confirm that Infinite Scroll is disabled.
- Check whether more items exist beyond the initial Pagination Value.
- Verify that the Dynamic Content Quantity has not already been reached.
- Clear Joomla, YOOtheme Pro, and browser caches before testing again.
Best Practices
- Configure pagination only after the Dynamic Content source is working correctly.
- Use moderate page sizes to maintain good frontend performance.
- Avoid loading very large numbers of complex items in a single request.
- Optimize article images and product images before using Infinite Scroll.
- Test pagination with Joomla access levels and multilingual content where applicable.
- Verify that custom item animations continue to work after new content is appended.
- Always test extension updates on a staging website before deploying them to production.
Summary
JP Global Pagination provides a simple and flexible way to add Load More and Infinite Scroll functionality to YOOtheme Pro Dynamic Content layouts.
For reliable operation, enable pagination directly on repeating Item elements, avoid slide-based components, and ensure the Custom Source Quantity field does not unintentionally restrict the available dataset.
With the correct configuration, the plugin can improve content browsing while keeping YOOtheme Pro pages responsive, organized, and easy to navigate.