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

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

How It Works

The Single Posts add-on works by using Ajax to append the previous post (in chronological order) to the Ajax Load More container as a user scrolls your website.

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

Note: At minimum, some WordPress development knowledge will be required to implement the Single Post add-on on your website. If you are unsure of how to implement or have questions regarding implementation please contact us prior to purchasing.

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

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

🔥  Did you know: You can Cache single posts to improve site performance!


Implementation

Implementing infinite scroll on a single post template is essentially a two step process.

Step 1

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 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 enabled then the Single Posts add-on is activated.

single_postEnable the infinite scrolling of single posts. Default = ‘false’
single_post_idThe current post ID to pass to Ajax Load More. Default = ‘get_the_ID()’
single_post_orderSelect the load order of posts while infinite scrolling. Default = ‘previous’ (by date DESC)
single_post_taxonomyQuery posts from the same taxonomy. Default = null
single_post_excluded_termsExclude posts by term ID from the post query. Default = null

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

Shortcode Builder

The following screenshot illustrates the process of building a Single Posts shortcode using the Ajax Load More shortcode builder.

Single Posts Shortcode Builder settings.

Example Shortcode[ajax_load_more single_post="true" single_post_id="'.get_the_id().'" post_type="post"]

Post Ordering

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

Single Posts ordering in Ajax Load More

Previous Post (Default)

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

Latest Post

Selecting the latest option will load the latest (newest) post by publish date and continue loading by date in descending ordering.

Next Post

Selecting the next option will load posts by date in ascending order using the WordPress core function, get_next_post().

Post ID Array

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.

Example Shortcode[ajax_load_more single_post="truesingle_post_order="88, 45, 201, 190, 22"]

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.

Below are the 3rd party commenting systems currently supported by Ajax Load More.

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


FAQs

Below are common questions regarding the Single Posts add-on. If you have a question and don’t see an answer here, please visit the support page and submit your request.

How can I display comments with Ajax loaded posts?

If you are having trouble displaying your comments template on the posts loaded via Ajax try adding the following $withcomments code above the call your function call to comments_template().

Why are animations and other functionality within my single post not working when using this add-on?

Any content element that requires JavaScript and has been loaded dynamically (with Ajax) will most likely need to be initiated after a successful Ajax request.

Examples of content that may require JavaScript initiation are:

  • Social sharing plugins
  • Facebook Comments
  • Disqus Comments
  • Slideshows
  • Lightbox Galleries
  • etc…

Please have a look at the almComplete() callback function – this callback is triggered after every successful Ajax Load More query and will allow you initiate functionality as content is loaded.

Why are shortcodes rendering as plain text in my posts?

If shortcodes are rendering as static text and not parsing in ajax loaded posts you may need to run a filter in your repeater template on the_content() function.


Visual Composer

Visual Composer users are required to execute WPBMap::addAllMappedShortcodes() prior to calling the_content() in an Ajax requests – see the example below:

Why are Facebook comments not showing up?

Facebook comments require javascript to initiate so you will be required to use the almComplete() callback function to load the comments.

If a post has multiple categories can I still query posts from the same taxonomy?

Yes, but please be aware that if you set a single_post_taxonomy value in the shortcode and the current post has multiple terms assigned, Ajax Load More will look for posts where ANY of the assigned terms are present.

Note: Setting a primary category or term does not affect a post query – this is out of the box WP functionality that cannot be adjusted.

Posts are loading before users reaches the bottom of the page, what gives?

This issue can arise if you have floated elements in your repeater template.

For example, your main post container has a float: left; CSS property assigned – this may cause the positioning of the load more button to become unreliable and cause posts and URLs to update prematurely.

A solution to this problem is to ensure your floated elements are always cleared by assigning the following CSS to the .alm-reveal container.

.alm-reveal{ overflow: hidden; }

Why is content after <!-- more --> shorttags not displaying?

This happens in some themes and frameworks because of the way the templates have been structure. To fix this issue add the following code snippet to the start of you Repeater Template.

Are there any themes the Single Posts add-on is not compatible with?

There are not any particular themes we can say are 100% incompatible with Ajax Load More however, the themes listed below will require advanced level modification to multiple files.

Is Divi page builder supported?

Unfortunately Divi by Elegant Themes is not supported by the Single Posts add-on. The issue revolves around Divi grid/column shortcodes rendering as plain text in admin-ajax requests – this has yet to be resolved with Divi support.

For those that are using Divi, we recommend using our other infinite scroll plugin, Post Explorer.


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.