Single Posts

Developer documentation for the Ajax Load More Single Posts add-on.


Theme Templates

Some theme are more complicated than others with regards to implementing infinite scroll on single post templates.

To help you get started, we’re compiling a library of working single.php template examples for popular WordPress themes.

GeneratePress

GeneratePress is a free WordPress theme that focuses on speed and usability.

Out of the box, the GeneratePress single.php template is pretty close to what we need. All that is required is to wrap the #primary div and add the Ajax Load More code as described in the Single Posts Implementation Guide.

Genesis

The default Genesis single.php template includes only one function, genesis(). This doesn’t work with Ajax Load More so we need to extend the template to include the default Genesis actions, hooks and a wrapping div element.

Below is a modified single.php Genesis template developed specifically for implementation with Ajax Load More.

Note: You should always create a Child Theme prior to modifying core theme templates.


Frequently Asked Questions

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 load posts on scroll?

When using Single Posts the pause parameter is automatically set to true, this stops ALM from loading posts on initial page load. The enable scrolling to trigger an Ajax load you need to set pause_override to true.

Example Shortcode[ajax_load_more single_post="true" single_post_target="#post-wrapper" pause_override="true"]

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; }

Jetpack Sharing is not working in Ajax, how can I fix this?

Jetpack Sharing disables itself in Ajax requests that are not named ‘get_latest_posts‘.

To fix this you will need to modify the core Sharedaddy module within Jetpack.

Open plugins/jetpack/modules/sharedaddy/sharing-service.php and goto line 754:

Remove the ¬†&& ‘get_latest_posts’ == $_REQUEST[‘action’] ¬†portion of the PHP conditional.

Here is what the updated code should look like:

Note: Modifying core plugin means that whenever the plugin is updated these changes will be lost.

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

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


« Back to Add-ons