Next Page
Infinite scroll multipage WordPress content with Ajax Load More and the Next Page add-on
The Next Page add-on will provide functionality for infinite scrolling and lazy loading multipage posts and pages.
Load and display paginated WordPress content on demand using the <!–-nextpage–-> Quicktag and Ajax Load More.
How It Works
The Next Page add-on for Ajax Load More works by using the <!-‒nextpage‒-> Quicktag to split the post_content of the current page (or post) into separate pages and allows users to infinite scroll the results.
When activated, the Next Page add-on will dynamically split the_content() of a post into unique pages where ever <!-‒nextpage‒-> tags are found.
As users load additional content, the browser address bar can update to the page currently in view and pageviews can be sent to Google Analytics for tracking – both these options can be turned on or off depending on your requirements.
This essentially means that with the Next Page add-on you can have Ajax Load More infinite scroll any content type, anywhere and at anytime.
The <!-‒nextpage‒-> tag is a standard method provided by WordPress to break website content into multiple unique pages.
Examples
Default
The default (out of the box) functionality of the Next Page add-on for Ajax Load More.
Post Preview
Display a post preview snippet with a ‘Continue Reading…‘ action for the user to view the full article.
Next Page & Paging Add-ons
Create an intuitive and user friendly navigation system for viewing a multipage post with Next Page and Paging add-ons.
Implementation
Implementing the Next Page add-on and Ajax Load More is essentially a two step process.
Step 1
The first step is to create a page or post with some paginated content. To do this, you must switch the content editor to the Text tab and add <!-‒nextpage‒-> tags where ever you want a page break to appear in your content.
For every <!-‒nextpage‒-> tag found in the_content(), Ajax Load More will create a corresponding page and load the paginated 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 the Ajax Load More shortcode directly to your template .php file using the WordPress do_shortcode function as seen in the example below.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <?php /* Template Name: Next Page Template Example Replace the_content() function in the WordPress loop with the [ajax_load_more] shortcode. */ get_header(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <header class="header"> <h1><?php the_title(); ?></h1> <p class="meta"><?php the_date('F d, Y'); ?></p> </header> <div class="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"]'); ?> </div> <?php endwhile; endif; ?> </article> <?php get_footer(); ?> |
Note: The Next Page add-on can only be used with content generated using the standard WordPress content editor.
Shortcode Parameters
The following shortcode parameters are available with the Next Page add-on.
| nextpage | Enable the infinite scrolling of multipage 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. (speed:scrolltop). Default = ‘250:30’ |
Shortcode Builder
The following screenshot illustrates the process of building a Next Page shortcode using the Shortcode Builder.
Example Shortcode
[ajax_load_more nextpage="true" nextpage_urls="true" nextpage_scroll="250: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.
FAQs
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.
Do I need a repeater template with the Next Page add-on?
No, the Next Page add-on uses the_content() for display – repeater templates are not used with this add-on.
My theme has wp_link_pages() support built in, how can I hide the navigation when using Next Page?
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.
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: 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.
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:
- 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 contact form on this website.