Single Posts
Developer documentation for the Ajax Load More Single Posts add-on.
Theme Templates
Some themes 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 single.php examples for some popular WordPress themes and frameworks.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
<?php /** * The Template for displaying all single posts. * * @package GeneratePress */ if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly. } get_header(); ?> <div id="alm-post-wrap"> <div id="primary" <?php generate_do_element_classes( 'content' ); ?>> <main id="main" <?php generate_do_element_classes( 'main' ); ?>> <?php /** * generate_before_main_content hook. * * @since 0.1 */ do_action( 'generate_before_main_content' ); while ( have_posts() ) : the_post(); get_template_part( 'content', 'single' ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || '0' != get_comments_number() ) : /** * generate_before_comments_container hook. * * @since 2.1 */ do_action( 'generate_before_comments_container' ); ?> <div class="comments-area"> <?php comments_template(); ?> </div> <?php endif; endwhile; /** * generate_after_main_content hook. * * @since 0.1 */ do_action( 'generate_after_main_content' ); ?> </main><!-- #main --> </div><!-- #primary --> <?php /** * generate_after_primary_content_area hook. * * @since 2.0 */ do_action( 'generate_after_primary_content_area' ); generate_construct_sidebars(); ?> </div> <style> /* Inline style to help with CSS float issues */ .alm-single-post{ overflow: hidden; } </style> <?php // Ajax Load More $args = array( 'single_post' => 'true', 'single_post_id' => get_the_ID(), 'single_post_target' => '#alm-post-wrap', 'post_type' => 'post', 'pause_override' => 'true', ); if( function_exists( 'alm_render' ) ){ alm_render($args); } ?> <?php get_footer(); ?> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
<?php // single.php get_header(); ?> <div id="alm-post-wrap"> <?php /** * Fires after the header, before the content sidebar wrap. * * @since 1.0.0 */ do_action( 'genesis_before_content_sidebar_wrap' ); genesis_markup( [ 'open' => '<div %s>', 'context' => 'content-sidebar-wrap', ] ); /** * Fires before the content, after the content sidebar wrap opening markup. * * @since 1.0.0 */ do_action( 'genesis_before_content' ); genesis_markup( [ 'open' => '<main %s>', 'context' => 'content', ] ); /** * Fires before the loop hook, after the main content opening markup. * * @since 1.0.0 */ do_action( 'genesis_before_loop' ); /** * Fires to display the loop contents. * * @since 1.1.0 */ do_action( 'genesis_loop' ); /** * Fires after the loop hook, before the main content closing markup. * * @since 1.0.0 */ do_action( 'genesis_after_loop' ); genesis_markup( [ 'close' => '</main>', // End .content. 'context' => 'content', ] ); /** * Fires after the content, before the main content sidebar wrap closing markup. * * @since 1.0.0 */ do_action( 'genesis_after_content' ); genesis_markup( [ 'close' => '</div>', 'context' => 'content-sidebar-wrap', ] ); /** * Fires before the footer, after the content sidebar wrap. * * @since 1.0.0 */ do_action( 'genesis_after_content_sidebar_wrap' ); ?> </div> <style> /* Inline style to help with CSS float issues */ #alm-post-wrap{ display: block; overflow: hidden; } .alm-single-post { overflow: hidden; } </style> <?php // Ajax Load More $args = array( 'single_post' => 'true', 'single_post_id' => get_the_ID(), 'single_post_target' => '#alm-post-wrap', 'single_post_order' => 'previous', 'post_type' => 'post', 'pause_override' => 'true', ); if( function_exists( 'alm_render' ) ){ alm_render($args); } ?> <?php get_footer(); ?> |
Note: You should always create a Child Theme prior to modifying core theme templates.
Callback Functions
almSinglePostsLoaded
The almSinglePostsLoaded() callback is dispatched after Single Posts has completed its initial setup routine on page load.
|
1 2 3 4 |
// custom.js window.almSinglePostsLoaded = function (alm) { console.log('ALM Single Posts Loaded'); } |
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.
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"]
The following code will render content only when loaded via the single post Ajax request.
|
1 2 3 4 5 6 |
// single.php if ( isset( $_GET ) && $_GET[ 'alm_page'] ) ) { echo '<p>I am only displayed when loaded via Ajax</p>'; } |
This is possible because Ajax Load More appends querystring parameters to each request for identification purposes.
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().
|
1 2 3 4 5 6 |
<?php // Display comments template in Ajax request global $withcomments; $withcomments = true; comments_template(); ?> |
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.
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.
|
1 2 3 4 5 6 |
<?php $postid = get_the_ID(); $content = do_shortcode(get_post_field( 'post_content', $postid )); $content = apply_filters('the_content', $content); echo $content; ?> |
Visual Composer
Visual Composer users are required to execute WPBMap::addAllMappedShortcodes() prior to calling the_content() in an Ajax requests – see the example below:
|
1 2 3 4 |
<?php WPBMap::addAllMappedShortcodes(); // VC Function the_content(); ?> |
Facebook comments require javascript to initiate so you will be required to use the almComplete() callback function to load the comments.
|
1 2 3 |
window.almComplete = function(alm) { FB.XFBML.parse(); } |
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.
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-single-post container.
.alm-single-post{ overflow: hidden; }
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:
|
1 2 3 4 |
// Allow to be used on P2 ajax requests for latest posts. if ( defined( 'DOING_AJAX' ) && DOING_AJAX && isset( $_REQUEST['action'] ) && 'get_latest_posts' == $_REQUEST['action'] ) { $show = true; } |
Remove the && ‘get_latest_posts’ == $_REQUEST[‘action’] portion of the PHP conditional.
Here is what the updated code should look like:
|
1 2 3 4 |
// Allow to be used on P2 ajax requests for latest posts. if ( defined( 'DOING_AJAX' ) && DOING_AJAX && isset( $_REQUEST['action'] ) ) { $show = true; } |
Note: Modifying core plugin means that whenever the plugin is updated these changes will be lost.
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.
|
1 2 3 4 5 6 7 8 |
<article> <?php global $more; $more = true; // The rest of your template goes here! // the_content(); etc. ?> </article> |