Single Posts

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.

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 please contact us before purchasing.

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

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 Ajax Load More can target 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 #post-wrapper element has been added to wrap the entire content area of the post template.

<?php
/**
 * The template for displaying single posts (single.php).
 */
get_header(); ?>   
  <?php 
  while ( have_posts() ) : the_post(); ?>   

    <!-- #post-wrapper (Ajax Load More target div) -->
    <div id="post-wrapper">	
    
      <article id="post-<?php echo get_the_id(); ?>" <?php body_class(); ?>>  	
        <h1><?php the_title(); ?></h1>
        <div class="entry-content">
          <?php the_content(); ?>	 
        </div>
        <footer>
          <?php the_tags(); ?>
          <?php comments_template(); ?>  
        </footer>
      </article>
      
    </div>
    <!-- #post-wrapper -->	

endwhile;   
get_footer(); ?>

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.

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 been added just after the closing div#post-wrapper element and references this element in the shortcode.

<?php
/**
 * The template for displaying single posts (single.php).
 */
get_header(); ?>   
  <?php 
  while ( have_posts() ) : the_post(); ?>   

    <!-- Start #post-wrapper (Ajax Load More target div) -->
    <div id="post-wrapper">	
    
      <article id="post-<?php echo get_the_id(); ?>" <?php body_class(); ?>>  	
        <h1><?php the_title(); ?></h1>
        <div class="entry-content">
          <?php the_content(); ?>	 
        </div>
        <footer>
          <?php the_tags(); ?>
          <?php comments_template(); ?>  
        </footer>
      </article>
      
    </div>
    <!-- #post-wrapper -->	
     
		<?php 
		// Ajax Load More shortcode
		echo do_shortcode( '[ajax_load_more single_post="true" single_post_target="#post-wrapper" post_type="post" pause_override="true"]' ); 

endwhile;   
get_footer(); ?>

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.

Alternate Implementation – Repeater Template Method

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

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

Step 2: Add the Shortcode

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

<?php
/**
 * The template for displaying single posts.
 * 
 * Replace the entire contents of the WordPress loop with the [ajax_load_more] shortcode.
 * @see https://connekthq.com/plugins/ajax-load-more/add-ons/single-posts/
 */
get_header(); ?> 
<main id="page-content">
  <div class="post-container">
    <?php
    // The loop
    if ( have_posts() ) :
      while (have_posts() ) : the_post();
        // replaced with Ajax Load More shortcode
        echo do_shortcode('[ajax_load_more post_type="post" repeater="default" single_post="true" posts_per_page="1" button_label="Next Post"]');
      endwhile;
    endif;
    ?>
  </div>
</main> 
<?php get_footer(); ?>

PHP

Shortcode Parameters

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

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
• Latest Post
• Next Post
• Custom Query
• Post IDs

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.

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.

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.

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.

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.

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 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, add an empty .alm-disqus HTML element to your repeater template in the location where 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).

<article>	
	<header>
		<h1><?php the_title(); ?></h1>
		<p class="meta"><?php the_time("F d, Y"); ?></p>
	</header>
	<div class="entry-content">  
		<?php the_content(); ?>     
	</div>           
	<footer>
		<h2>Comments</h2>
		<div class="alm-disqus" data-disqus-shortname="{your-shortname}"></div>   		
	</footer> 
</article>

Configuration

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

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

If you did not receive a confirmation email containing your license key, please check your spam/junk folder. If you still cannot locate the email, contact me at darren [at] connekthq.com or use the Product Support form.