Support » Fixing WordPress » One page site with infinite scroll, load single post in lightbox

  • Hello, everyone. Hopefully one of you can help me. I’m developing a simple theme that uses infinite scroll and colorbox.

    The way it should work is as follows:

    • A user hits the index page, gets all posts on the page with infinite scroll handling paging – So far, so good. This works.
    • A user clicks a post title, that title loads the post detail via colorbox – OK, not a big deal. I think I can do that without too much trouble.
    • Colorbox callback should update the address bar URL with the permalink in case a user bookmarks the page – have yet to do, but I’m sure it can be done.
    • A user navigates to the site via a bookmarked permalink, the list of all posts (with infinite scrolling handling paging) loads, while the requested post detail loads via colorbox – here be the dragons. I can’t get this to work just yet.

    I’ve tried a few things up to this point with no dice – closest I can get is with multiple loops to load all posts and then the single post on index.php, but pagination for the infinite scroll load breaks whenever the main query is for a single post.

    Is there a way to:

    • grab the query vars, specifically the requested post id
    • store that in a var in order to use a secondary loop to load the detail
    • then use pre_get_posts() to update the query in order to load all posts and correct pagination?

    Or am I going about this all wrong (I’m sure I am). Should I instead write a plugin to do what I need?

    Here’s the code in question for reference (from index.php):

    <?php
    		$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
    
    		$args = array (
    			'posts_per_page'         => '10',
    			'order'                  => 'DESC',
    			'orderby'                => 'date',
    			'paged'					 => $paged
    		);
    
    		$my_query = new WP_Query( $args );
    
    		// New Loop
    		if ( $my_query->have_posts() ) {
    			while ( $my_query->have_posts() ) {
    				$my_query->the_post();
    				get_template_part( 'content', get_post_format() );
    			}
    		}
    		?>
    		</div><!-- #content -->
    		<?php next_posts_link(); ?>
    		<?php
    		// Restore original Post Data
    		wp_reset_postdata();
    
    		if ( is_single() && have_posts() ) {
    			echo('<div id="post-detail">');
    			// Original Loop
    			while ( have_posts() ) {
    				the_post();
    				get_template_part( 'content', get_post_format() );
    			};
    			echo('</div>');
    		}
    		?>

    Thanks for any an all help!

  • The topic ‘One page site with infinite scroll, load single post in lightbox’ is closed to new replies.