The Single Posts add-on will enable infinite scrolling of complete posts on WordPress single post templates.

Enable core Ajax Load More functionality on single posts & custom post type templates as well as update the browser URL when additional posts come into view – view example.

Features

A few key features of the Single Posts add-on for Ajax Load More.

URL Rewrites

As visitors scroll, the browser address bar is updated to the URL of the post currently in view.

View Example

Progress Bar

Display a reading progress bar indicator at the top or bottom of the browser window.

View Example

Post Preview

Show a preview of Ajax loaded posts and have visitors click to load the remainder of the post.

View Example

Post Ordering

Take full control over the ordering of upcoming posts by selecting a post order type.

Documentation

Google Analytics

Track user interaction by sending pageviews to your Google Analytics account.

Fwd & Back Buttons

Allow visitors to navigate between ajax loaded posts using their forward and back browser buttons.

Post Types

Add infinite scrolling to single post templates for both standard WordPress Posts and Custom Post Types.

Term Query

Single Posts can query posts from the same taxonomy term(category, tag or custom taxonomy).

Add-on Details

Learn more about the Single Posts add-on.

How It Works

The Single Posts add-on works by using Ajax to get and append the upcoming (or next) post to the Ajax Load More container as a user scrolls the page.

By utilizing core WordPress functions such as get_previous_post(), get_next_post() and get_the_ID(), the Single Post add-on will retrieve the upcoming post ID and hook into Ajax Load More for the display and rendering of post content.

URL Updates

When upcoming posts are loaded and come in to view, the browser address bar will update to the URL of the post currently in view.

Previous Post Update Url

URL functionality is important for users who wish to share a specific post that has been loaded via infinite scroll.


Implementation

Single Posts functionality is initiated by placing the Ajax Load More shortcode directly inside of a single post or custom post type template – e.g. single.php.

Implementation of this add-on will require modification of core theme files and some WordPress development knowledge may be required to implement this add-on. If you have questions or concerns regarding this please contact us prior to purchasing.

Note: The Single Posts add-on (v1.4.3+) no longer requires the use of Repeater Templates.

Elementor Users: Please see this blog post for information regarding infinite scrolling your Elementor single posts.

The two-step implementation process is as follows:

Step 1: Template Wrapper

The first step is to wrap your single post template in an HTML wrapper that can be targeted by Ajax Load More during the loading process. This is a crucial step as Ajax Load More will only render content located inside of this wrapping element while infinite scrolling.

If it’s not obvious that your single template has a wrapper in place you will be required to modify the template to add one –  see below for an example.

In the single.php example below, a div#post-wrapper element has been added to the wrap the entire content area of the post template.

The template wrapper must have a unique ID (e.g.  #post-wrapper) or classname (e.g. .container) otherwise Ajax Load More may experience issues while loading post content.

Note: A child theme should always be created prior to modifying core theme files.

Step 2: Adding the Shortcode

The final step is to create a Single Post shortcode using the shortcode builder. Once created, place the shortcode inside your single post template at the location Ajax Load More should appear using the do_shortcode method.

The single_post_target parameter of your shortcode should reference the template wrapper element created in step 1.

In the updated single.php template below, the [ajax_load_more] shortcode has added just after the closing div#post-wrapper element and references this element in the shortcode.

And that’s all there is to it – with the template wrapper and shortcode in place, Ajax Load More will start infinite scrolling your single posts.

Single Posts offers an alternative implementation method that uses standard Repeater Templates for infinite scrolling single posts.

This implementation method also offers integration with the Cache add-on.

Step 1 – Create Repeater Template

Create a new Repeater Template that will be used specifically for your single post display. This template will include core WordPress functions such as the_title() and the_content(). In most cases the content of the template will be a direct copy and paste from an existing theme template (e.g. single.php).

Previous Post Repeater Template

Step 2 – Add the Shortcode

Add the Ajax Load More shortcode directly to your single template .php file using the WordPress function, do_shortcode as seen in the example below.

Note: Ajax Load More will take care of loading ALL posts, including the initial post when a user lands on the page. All that should remain in your single.php loop is the ajax_load_more shortcode (as seen above).


Shortcode Parameters

The following shortcode parameters are available for use with the Single Posts add-on.

single_post Enable the infinite scrolling of single posts. Default = ‘false’
single_post_id The current post ID to pass to Ajax Load More. Default = ‘get_the_ID()’
single_post_target The ID or classname of HTML element that wraps your single post content. e.g. #container or .post-wrapper Default = null
single_post_order Select the load order of posts while infinite scrolling. Default = ‘previous’ (by date DESC)
single_post_query_order Select the post ordering of the custom query. Default = ‘previous’ (by date DESC)
single_post_taxonomy Query posts from the same taxonomy (category/tag etc.). Default = null
single_post_excluded_terms Exclude posts by term ID from the post query. Default = null
single_post_preview Show a preview of Ajax loaded posts and have the user click to load the remainder of the post. Default = null
single_post_progress_bar Display a reading progress bar indicator at the top or bottom of the browser window. Default = null
Example Shortcode[ajax_load_more single_post="true" single_post_target="#post-wrapper" post_type="post"]

Note: single_post shortcode parameters should only be used on single post templates – attempting to implement elsewhere is not recommended.


Post Ordering

Single Posts provides users the ability to control the ordering of the upcoming posts by selecting one of the following parameters when implementing an Ajax Load More shortcode.

Previous Post (Default)

Selecting the previous option will load posts by date in chronological order using the WordPress core function, get_previous_post() – view example.

Example Shortcode[ajax_load_more single_post="truesingle_post_order="previous"]

Latest Post

Selecting the latest option will load the latest (newest) post by publish date and continue loading posts by date in chronological order – view example.

Example Shortcode[ajax_load_more single_post="truesingle_post_order="latest"]

Next Post

Selecting the next option will load posts by date in reverse chronological order using the WordPress core function, get_next_post() – view example.

Example Shortcode[ajax_load_more single_post="truesingle_post_order="next"]

Custom Query

Selecting the query option will allow for core Ajax Load More parameters such as taxonomies, custom fields, categories and tags to be used as query parameters for the upcoming posts.

Example Shortcode[ajax_load_more single_post="truesingle_post_order="query" taxonomy="portfolio-type" taxonomy_terms="design, development" taxonomy_operator="IN"]

Note: This option was added in Single Posts 1.5.

Post IDs

The single_post_order shortcode parameter will also accept an array of comma separated Post IDs. This allows users to be very specific about which posts are shown in the infinite scroll list.

The shortcode below will load 5 additional posts after the initial post – view example.

Example Shortcode[ajax_load_more single_post="truesingle_post_order="1534,1540,1541,1562"]

Comments

The out of the box WordPress comments are fully supported and should function as intended with Ajax Load More, however some 3rd party commenting systems require workarounds when being integrated with Ajax.

Disqus

The Single Posts add-on has a custom built-in solution for loading Disqus comments with Ajax.

To enable support for Disqus commenting, simply add an empty .alm-disqus HTML element to your repeater template in the location you wish comments to appear – on the empty element you must also pass in your Disqus shortname as a data attribute (as seen in the example template below).


Configuration

The following configuration options will be available on the Ajax Load More Settings screen immediately following installation.

Updating Single Posts settings in Ajax Load More


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: Single Posts 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 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.