The Next Page add-on will provide functionality for infinite scrolling and lazy loading multi-page WordPress posts and pages.
Load and display paginated WordPress content on demand using the Page Break Gutenberg block or the <!–-nextpage–-> Quicktag and Ajax Load More.
How It Works
The Next Page add-on uses the Page Break block in the WordPress Block Editor (Gutenberg) or the <!-‒nextpage‒-> Quicktag in the Classic Editor to split the post_content of the current post into unique pages – once a post has been split into pages Ajax Load More adds functionality to infinite scroll the results.
When activated, the Next Page add-on dynamically splits the_content() of a page or post into unique pages at the location where Page Break blocks or <!-‒nextpage‒-> tags are found.
As users load additional content, the browser address bar is updated to the page currently in view and pageviews are sent to Google Analytics for tracking – both these options can be turned on or off depending on your requirements.
With the Next Page add-on you can infinite scroll any WordPress content type, anywhere on your site and at anytime.
The <!-‒nextpage‒-> tag is core functionality provided by WordPress to break content into multiple pages.
The default (out of the box) functionality of the add-on.
Automatically split content into pages without requiring <!–nextpage–> quicktags.
Next Page & Paging
Create an intuitive and user friendly slideshow for viewing multi-page posts with Next Page and Paging add-ons.
Display a post preview snippet with a ‘Continue Reading…’ action for the user to view the full article.
Implementing the Next Page add-on is a two-step process of creating multi-page content and setting up the page template to render the Ajax Load More shortcode.
Both the Gutenberg and the Classic Editor are supported by the add-on, however the implementation steps vary for both editors so please read below for best practices on creating multi-page content.
Note: Next Page add-on integrates with the standard WordPress content field only – content created via custom fields or rich text widgets cannot be used with this add-on.
Step 1 – Creating Content
The first step is to create a page or post with some paginated content – if you’ve already done this, skip ahead to Step #2.
Gutenberg users must insert a Page Break block at the locations they wish a break to appear in the content.
For every Page Break instance found, Ajax Load More will create a corresponding page and load the paged content when requested.
Classic Editor users must switch the content editor to the Text tab and place <!-‒nextpage‒-> tags where the page breaks should appear in the content.
For every <!-‒nextpage‒-> instance found in the_content(), Ajax Load More will create a corresponding page and load the paged content when requested.
Note: The <!-‒nextpage‒-> tag must be added to the content editor via the Text tab (as seen above) and will display as a page break in the Visual editor.
Step 2 – Add Shortcode
The next step is to add the Ajax Load More shortcode directly to your template (.php) file using the WordPress do_shortcode function as shown in the example below. The shortcode must be added directly to a template file and cannot be added to the content editor.
The Ajax Load More shortcode should replace the_content() of the page only as no other content or elements will be affected by the Next Page add-on.
Template Name: Next Page Template Example
Replace the_content() function in the WordPress loop with the [ajax_load_more] shortcode.
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<p class="meta"><?php the_date('F d, Y'); ?></p>
<?php // the_content(); ?>
<?php echo do_shortcode('[ajax_load_more nextpage="true" nextpage_urls="true" nextpage_post_id="'. get_the_ID() .'" pause="true" button_label="Next Page"]');
<?php endwhile; endif; ?>
<?php get_footer(); ?>
The following shortcode parameters are available with the Next Page add-on.
|nextpage||Enable the infinite scrolling of multi-page WordPress content (true/false). Default = ‘false’|
|next_post_id||The ID of the current page/post. *required|
|nextpage_urls||Update the browser address bar as pages come into view. (true/false). Default = ‘true’|
|nextpage_pageviews||Send pageviews to Google Analytics. (true/false). Default = ‘true’|
|nextpage_scroll||Scroll users automatically to the next page. (true/false:scrolltop). Default = ‘true:30’|
The following screenshot illustrates the process of building a Next Page shortcode using the Shortcode Builder.
[ajax_load_more nextpage="true" nextpage_urls="true" nextpage_scroll="true:50" nextpage_post_id="'.get_the_id().'" pause="true" pause_override="true" scroll="false"]
Note: Next Page shortcodes must be added to templates using the do_shortcode method of shortcode implementation.
Below are common questions regarding the Next Page add-on. If you have a question and don’t see an answer here, please visit the support page and submit your request.
No, the Next Page add-on uses the_content() for display – repeater templates are not used with this add-on.
Ajax Load More will not hide the paging navigation generated by wp_link_pages(), it will be up to you to modify your template to remove the function or use CSS to hide it.
Yes, the Gutenberg Editor is fully supported by the Next Page add-on. In Gutenberg you will use the Page Break block to split your content into multiple page.
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: Next Page 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.
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:
- Visit the Licenses section within the Ajax Load More plugin.
- Enter the product key and click Activate License.
- If the status indicator turns green your add-on has been successfully activated (example below).
If you did not receive your confirmation/purchase receipt email and license key, please check your spam/junk folder and if you still cannot locate the email please contact me at darren [at] connekthq.com or use the Product Support form on the website.