The Previous Post add-on will enable infinite scrolling of older(previous) posts on your 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 Previous Post 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() and get_the_ID(), the add-on will retrieve the previous 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 Previous 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 older 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 page 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).


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 Previous Post 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).


Shortcode Parameters

The following shortcode parameters are available with the Previous Post add-on.

previous_post Enable the infinite scrolling of single posts. Default = ‘false’
previous_post_id The current post ID to pass to Ajax Load More. Default = ‘get_the_ID()’
previous_post_taxonomy Query previous posts from the same taxonomy. Default = null
previous_post_excluded_terms Exclude posts by term ID from the previous post query. Default = null

The previous_post shortcode parameters can only be used on single template pages – attempting to implement elsewhere is not recommended.

Shortcode Builder

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

previous-post-shortcode

Example Shortcode[ajax_load_more previous_post="true" previous_post_id="'.get_the_id().'" post_type="post"]

Configuration

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

Previous Post Settings


FAQs

Below are common questions regarding the Previous post 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 previous posts from the same taxonomy?

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

Note: Setting a primary category or term does not affect a previous post query.

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 Previous Post 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 Previous Post 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: Previous Post 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 contact form on this website.