Query Loop

Infinite scroll the WordPress core Query Loop block

The Query Loop add-on enables infinite scroll or load more functionality for the WordPress Query Loop block.

Easily add infinite scroll or load more to a Query Loop block by simply adding the Ajax Load More block as a child block of a Query Loop.

Features

Some key features of the Query Loop add-on for Ajax Load More.

Block Editor Integration

Add Ajax Load More as a child of the Query Loop block to enable Ajax Load More functionality.

URL Rewrites

Easily share deep links to paged Query Loop content with the URL rewrite feature.

Google Analytics

Track interaction and engagement by sending pageviews to your Google Analytics account.

Load Previous

When landing on a paged result, allow visitors to load previous Query Loop pages of content with load previous functionality.

Add-on Details

Learn more about the Query Loop add-on.

How It Works

The Query Loop add-on works by hooking into the WordPress core Query Loop block and renders the results via infinite scroll or load more with the Ajax Load More plugin.

View Example

Examples

The following Query Loop example uses an out-of-the-box WordPress post template for styling with Ajax Load More controlling the load more/infinite scroll feature that renders additional paged content.

    Query Loop Shortcode Example[ajax_load_more loading_style="white" scroll="false" urls="false"]

    More Examples

    Configuration

    Query Loop add-on configuration happens within the WordPress Block Editor while editing a post or page. Modifying page templates or creating a Repeater Template is not required to implement this add-on.

    The 3-step Query Loop implementation guide is as follows:

    Step 1: Add Query Loop Block

    The first step is to add a Query Loop block to the page by selecting Query Loop from the WordPress Block Inserter.

    Query Loop block selection
    Select the Query Loop block from the Block Inserter.

    Step 2: Configure Block Template and Query Loop Settings.

    The next step is selecting your post template and configuring the block settings such as Post Type, ordering, and Posts Per Page.

    Query Loop template creation and settings
    Configure the Post Template/Pattern and the display.

    Step 3: Add Ajax Load More to Query Loop

    The final step is to add an Ajax Load More block as a direct child of the Query Loop block.

    Once added, Ajax Load More will automatically detect that it’s a child of a Query Loop and set the required parameters to infinite scroll the results.

    View Example
    Add Ajax Load More block as a child of a Query Loop.
    Ajax Load More block added as a child of a Query Loop.

    When added as a child, Ajax Load More accepts a few new parameters to help with the infinite scroll configuration.

    Pro Tip: Use the Document Overview panel in the Block Editor to view the blocks in a content tree format. This view makes it easier to determine the position of a block in the content tree.

    Parameters

    The standard [ajax_load_more] shortcode has the following parameters to style and configure the Query Loop integration.

    urlsUpdate browser URL as new pages are loaded into view. Default = true
    prev_button_labelThe text for the load previous button. This button is rendered when users land on a paged URL. Default = Load Previous
    prev_button_loading_labelThe text for the load previous button during the loading state.
    prev_button_done_labelThe text for the load previous button when no posts remain to be loaded.

    Installation

    Upon purchase of this add-on you will receive a confirmation/purchase receipt email. Your receipt will contain a direct link for downloading your copy of Ajax Load More: Query Loop and a license key.

    After downloading the add-on, upload the unzipped files to your /wp-content/plugins/ directory or visit your plugins dashboard and upload the downloaded .zip under Add New.

    License Activation

    To activate your add-on and receive updates directly in your WordPress plugins dashboard users are required to enter the license key that was included with their purchase receipt.

    To activate a license key:

    1. Visit the Licenses section within the Ajax Load More plugin.
    2. Enter the product key and click Activate License.
    3. If the status indicator turns green your add-on has been successfully activated (example below).
    License Key Example

    If you did not receive a confirmation email containing your license key, please check your spam/junk folder. If you still cannot locate the email, contact me at darren [at] connekthq.com or use the Product Support form.