Load More

Load More 2.1.1 requires:

• PHP: 8.2.0 or newer
• YOOtheme Pro: 5.0.51 or newer
• Joomla: 5.4.9 or newer, or WordPress: 7.1.3 or newer
• A current version of Chrome, Firefox, Safari or another modern browser

JavaScript is required for progressive loading. Without JavaScript, the rendered pagination link remains available as a normal navigation fallback.

Load More progressively appends content from the next or previous paginated page into an existing Flart Studio, YOOtheme Pro or custom content container. Visitors can load content with a button or through Infinite Scroll without leaving the current page.

It supports blog and archive listings, navigation between individual articles or posts, browser history, translated frontend messages, keyboard focus handling, optional page assets and an end message when no more content is available.

1. Create or edit the YOOtheme Pro template that renders the paginated content.
2. Give the Grid, List or other target element a unique ID under Advanced → ID.
3. Add Flart Studio → Load More after the target content.
4. Under Connect, choose the integration and identify the target element.
5. Under Settings → Template, keep automatic page detection or select the required page context.
6. Choose Button or Infinite Scroll under Settings → Loading.
7. Save the template and test at least two pagination pages on the frontend.

Place Load More on a YOOtheme Pro dynamic template page that has a valid CMS pagination context. Typical uses are blog, category, archive, shop listing and single article or post templates.

A static Builder page does not provide the pagination data Load More needs. In that case the public page remains silent, while Builder shows a diagnostic message explaining that a dynamic template is required.

Automatic uses the pagination information supplied by the current CMS template. It is the preferred choice when detection is unambiguous.

Choose Blog / Archive for paginated listings. Choose Single Article / Post when each request should append the next or previous complete article or post. Explicit values are useful when the surrounding template requires a fixed interpretation.

On a blog or archive page, Load More follows the CMS pagination sequence and extracts the configured items from every fetched page. Those items are appended to the existing connected container.

The first page may contain several Grid or List items, and every later page may contribute another group. The item markup and integration contract must remain compatible across the complete pagination chain.

Set Page Context to Single Article / Post, then choose Next or Previous. Each request appends the content from one neighboring article or post.

On WordPress, Filter by Term can restrict navigation to posts that share the selected taxonomy term. A single-item page receives its sequential batch number without redundant first and last batch markers.

For the Single Article / Post context, WordPress can navigate only between posts that belong to the same term in a selected taxonomy. Choose the taxonomy under Settings → Template → Filter by Term.

Select None to use the normal previous or next post sequence. This option is specific to WordPress and is not shown in Joomla.

• Flart Studio — for compatible Flart Studio elements that expose Load More container and item hooks.
• YOOtheme Pro — for supported native Accordion, Description List, Gallery, Grid, List, Products or Table elements.
• Custom Selectors — for other predictable markup where you can provide exact container and item CSS selectors.

The integration determines where new items are found in fetched pages and where they are inserted in the current page.

Select Flart Studio and enter the target element's Advanced ID with its leading #, for example #articles-grid. Load More then uses the maintained Flart Studio container and item hooks inside that element while excluding nested sublayouts.

The ID remains optional for compatibility in 2.1.1, but using a unique exact ID is strongly recommended and is intended to become required in a future major release.

The maintained native integrations are Accordion, Description List, Gallery, Grid, List, Products and Table.

Select the matching element type and enter its Advanced ID with the leading #. Load More creates the correct container and item selectors for that element type. Use Custom Selectors for markup outside this list.

Enter one CSS selector for the container that receives content and another for the individual items found inside fetched pages. For example, use #my-content > div as the container and #my-content > div > div.el-item as the item selector.

Keep both selectors narrow and stable. The container selector must resolve to exactly one target on the current page. Selector lists, malformed selectors and ambiguous targets fail closed instead of appending content to an uncertain location.

The integration type defines the selector contract used by the current page and every fetched page. After changing it, save the layout and reload Builder so the preview and all assigned templates render the same configuration.

This is especially important when the first pagination page and later pages use different templates.

Yes. Every intermediate template must contain a compatible Load More element. The element on the page the visitor opened owns the loading mode, styling, history, retry behavior and other active settings. Matching Load More markup in each fetched document supplies the following pagination URL.

The connected item markup must use the same integration contract throughout the chain. The final page may omit Load More when no further pagination URL exists.

No. Load More 2.x creates its stream identity automatically from the template and integration context. The former manual Static ID setting was removed.

Continue to give the connected content element a unique Advanced ID where the selected integration requires one. That ID identifies the content target; it is different from the automatic pagination stream identity.

Button waits for the visitor to activate the Load More link before each request. Infinite Scroll can request pages automatically as the viewport approaches the bottom of the connected content.

Both methods use the same validated pagination chain, loading state, retry behavior, history options and terminal message. The button is a real link, so normal navigation remains available before JavaScript enhancement.

• Auto-load — starts automatic loading as the viewport approaches the content boundary.
• Button, Then Auto-load — waits for one button activation, then continues automatically.
• Auto-load, Then Button — automatically loads a limited number of pages, then shows the button if another page exists.

A failed automatic request exposes a visible retry button. After a successful retry, the configured behavior resumes when its limit has not already been reached.

Pages to Auto-load sets how many pages are loaded automatically before Auto-load, Then Button changes to manual activation. Supported values are 3–20.

Scroll Threshold sets how close the viewport must be to the bottom of the connected content container before automatic loading starts. Supported values are 100–800 pixels. It is measured against the content target rather than the bottom of the complete document.

Enable Settings → Loading → Page Assets only when content from later pagination pages depends on scripts or styles declared in those pages' <head>. The option is disabled by default.

Native YOOtheme elements and other components whose assets are already present on the first page usually do not need it. Keeping it disabled avoids unnecessary asset reconciliation work.

Page Assets supports same-origin external stylesheets and classic or module scripts declared directly in the fetched page head. Stylesheets settle first, then scripts execute sequentially in their fetched order. Shared URLs are reused across Load More elements.

Inline code, body resources, cross-origin URLs, preload hints, import maps, disabled or alternate stylesheets and unsupported head elements are ignored. CSP nonces are never copied. If a required supported resource fails, the content is not appended and the normal retry path is shown.

No. The plugin ships its own integration script and the pinned Infinite Scroll 5.0.0 browser library inside the package.

Normal operation requests same-origin pagination documents. When Page Assets is enabled, it may also request supported same-origin scripts and styles declared by those documents. Joomla or WordPress performs extension update checks separately.

The button can use UIkit button or link styles, size, full width, an optional divider and a top margin. During a button request, its footprint is retained while the visible text changes to a centered spinner. Automatic loading uses the standalone spinner.

When no further page exists, the manual controls are removed and the configured End Message is shown. Its style, responsive text alignment and margin use native YOOtheme and UIkit conventions.

The standard Load More button text, navigation label, end message and runtime status announcements follow the active supported site language. The element name Load More itself remains in English in Builder.

An empty field or an exact supported default value uses the translated fallback. If you enter custom button or message text, Load More preserves it exactly and does not translate it again.

None leaves the browser URL unchanged. Replace updates the current history entry as loaded page groups become active while scrolling. Push adds entries so the browser Back and Forward controls can move through those states.

Enable Page Title → Update browser tab title to use each active loaded page's title. Existing application data in history.state is preserved.

Yes. Fields that display YOOtheme Pro's Dynamic Content control can be mapped from the current template source, including supported integration values and frontend text fields.

Resolved values pass through the same selector, ID, plain-text and range validation as manually entered values. Keep mapped IDs and selectors stable across every pagination page, and remember that custom mapped button or message text is treated as authored text rather than an automatic translation key.

Load More renders a labelled navigation landmark, exposes busy and disabled states, announces loading, success, failure and completion through polite live regions, and hides decorative spinners from assistive technology.

When a keyboard user explicitly activates the button, focus moves to the first newly appended item. A temporary focus target is removed after blur. Mouse and automatic-scroll loading do not move focus unexpectedly.

The Load More control is rendered as a real pagination link. In Infinite Scroll mode, no-JavaScript CSS reveals that same link instead of producing a duplicate fallback control.

Visitors and crawlers can therefore follow the CMS pagination normally. Progressive loading, spinners, live announcements and in-page history updates require JavaScript.

Load More preserves ordinary same-origin pagination links so server-rendered pages remain independently reachable. The end message uses data-nosnippet so it is not intended to become a search-result snippet.

The plugin does not create or change canonical URLs, robots directives or sitemap entries. Configure those through Joomla, WordPress or the site's SEO solution.

Every newly appended item receives a sequential data-fs-loadmore-batch value identifying the pagination page that supplied it. A group containing several items also marks its first and last items with data-fs-loadmore-batch-start and data-fs-loadmore-batch-last.

Use these attributes for batch-specific entrance animations, analytics or custom styling. A one-item batch has only the number because the same element does not need redundant start and last markers.

Yes, provided each instance owns a different exact content target. Give connected elements unique IDs and keep their selectors scoped so one Load More instance cannot claim another instance's content.

Flart Studio integration excludes matching containers nested inside Builder sublayouts. If two wrappers try to own the same live target, the ambiguous configuration fails closed.

Yes. The Settings tab includes native position, margins, maximum width, block alignment, text alignment, animation and visibility controls. Button, spinner and end-message sections provide their own relevant presentation options.

Use those controls first so the element follows the active YOOtheme style consistently across breakpoints.

Use Advanced → CSS. The editor automatically scopes supported selectors to the current element. Common hooks include .fs-loadmore__button, .fs-loadmore__button-text, .fs-loadmore__spinner, .fs-loadmore__status and .fs-loadmore__divider.

For newly appended content, use [data-fs-loadmore-batch] and its optional boundary attributes when the design should apply by loaded group. Avoid manually authoring runtime state attributes.

Enable Connect → Debug → Log debug information to the browser console for the affected element, then reproduce the request with the browser developer console open.

For advanced diagnostics, the page manager is available as window.FSLoadMoreManager. Its refresh() method rebuilds registered elements, and its debug property can enable product diagnostics. These tools are intended for troubleshooting rather than normal page setup.

The failed content is not appended. Button mode remains actionable, while automatic modes expose a visible retry control and announce the failure to assistive technology.

After a successful retry, Load More restores the intended automatic or prefill behavior unless the configured automatic page limit has already been reached. Repeated or cyclic pagination URLs are rejected to prevent duplicate loading loops.

Yes. The runtime detects elements and connected targets that Builder adds, removes or replaces. It cleans up stale listeners and requests, restores retained pagination state, and avoids briefly showing a stale button after the final page was already reached.

If you changed the integration type or assigned templates, save and reload Builder. For third-party DOM replacement, window.FSLoadMoreManager.refresh() can request a complete runtime refresh.

The end message appears when the active pagination chain has no more content to load. It does not mean merely that one request finished; it represents the terminal state of that Load More stream.

If it appears too early, verify that the next fetched page contains a matching Load More wrapper and a valid following pagination URL. The final page itself may omit the wrapper when no further URL exists.

• Confirm the fetched page uses the same assigned template and integration type.
• Check that the target element ID is present and unique on both pages.
• For Custom Selectors, verify that the item selector matches the final item elements in the fetched HTML.
• Make sure the container selector resolves to exactly one current-page target.
• Enable Debug and inspect the browser console and the fetched document in the Network panel.

Every intermediate pagination page must emit compatible Load More markup so the runtime can discover the next URL. Confirm that later pages use the expected template, direction and integration contract.

If the first and later pages use different templates, place Load More on both. The active first-page instance keeps control of its settings, while the fetched instance supplies the continuation URL.

Give every connected content element a unique Advanced ID and ensure its container selector resolves exactly once. Do not reuse the same target for two Load More instances.

For YOOtheme Pro integration, select the correct native element type. For Custom Selectors, avoid broad descendant selectors, selector lists and IDs beginning with invalid CSS syntax. Invalid or ambiguous ownership is rejected rather than guessed.

A supported stylesheet or script may have failed, timed out, redirected unexpectedly or conflicted with an existing resource. Load More waits for required styles before committing the fetched content so visitors do not receive partially initialized markup.

Inspect the Network and Console panels, correct the resource response, then use the retry control. If later content already works with assets loaded by the first page, disable Page Assets.

Yes. Load More includes Builder translations for 28 locales. YOOtheme Pro supplies translations for its shared General and Advanced controls. If a matching or valid product catalog is unavailable, the original English text is used.

The element name remains Load More in every language. Standard frontend button and status text is translated, while custom authored text remains unchanged.

When the current fs-loadmore plugin is activated, version 2.1.1 asks the canonical WordPress adapter to deactivate the obsolete fs-load-more plugin identity in the relevant site or network context.

This prevents two copies of the same element from remaining active after an upgrade. Once the new plugin is confirmed working, the inactive legacy plugin can be removed through WordPress administration.

• Confirm PHP 8.2+, Joomla 5.4.9+ or WordPress 7.1.3+, and YOOtheme Pro 5.0.51+.
• Place Load More on a dynamic template with real CMS pagination.
• Verify the integration type, unique target ID, element type and selectors.
• Confirm every intermediate pagination template contains compatible Load More markup.
• Check the next or previous link by opening it directly.
• Enable Debug and inspect browser Console and Network errors.
• Save and reload Builder after integration or template changes.
• Clear Joomla or WordPress, YOOtheme, browser and CDN caches after updating the plugin.
• Recompile the active YOOtheme style if the controls appear unstyled.