How to Add jQuery Infinite Scroll to My Custom Archive Page

by

I currently have a custom archive page that displays my current post at the top and then links to all of my older posts below that. However, I need to break up the page so that it displays the current post and then below that just the current months posts. I want to use the jQuery infinite scroll plugin to display older posts month by month as they scroll down the page it automatically loads the next month’s posts.

Here is my code that I have to display the current post:

<?php get_header(); ?>
    <div id="members-msg" class="para-element" data-offset="-0.1">
        <div class="third fleft">
            <?php
            global $post;
            $tmp_post = $post;
            $args = array( 'numberposts' => 1, 'category' => 6 );
            $myposts = get_posts( $args );
            foreach( $myposts as $post ) : setup_postdata($post); ?>
                <a href="https://wordpress.stackexchange.com/questions/73217/<?php the_permalink(); ?>"><h2><?php the_title(); ?></h2></a>
                <?/* <?php the_excerpt(); ?> */?>
                <?php the_content();?>
            <?php endforeach; ?>

        </div>
        <div class="twothirds fright">
            <div id="slider-con">
                <ul id="slider">
                    <?php 
                    $args = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_parent' => $post->ID ); 
                    $attachments = get_posts($args);
                    if ($attachments) {
                        foreach ( $attachments as $attachment ) {
                            echo '<li>';
                            the_attachment_link( $attachment->ID , 'full' );
                            echo '</li>';
                        }
                    }
                    ?>

                </ul>
                            <?php $post = $tmp_post; ?>
            </div>
        </div>
    </div>
</div>
</div>

Here is the code I have to display my older posts:

<div id="reason-header" class="row-fluid">
<div class="parallax">
    <div class="para-element" data-offset="-0.3">
        <h3>Browse <span>Our</span> Archives</h3>
    </div>
    <div id="reasons-hdr" class="para-image" data-offset="-0.8">
    </div>
</div>
</div>
<div id="all-posts">
<div class="content">
    <?php
     global $post;
     $tmp_post = $post;
     $myposts = get_posts('numberposts=-1&category=6&orderby=date&order=DESC');
     foreach($myposts as $post) :
    ?>
    <?php 
        setup_postdata($post);
                $size="thumb";
                $images = get_children(array(
                'post_type' => 'attachment',
                'numberposts' => 1,
                'post_status' => null,
                'post_parent' => $post->ID));
                foreach($images as $image){
                $attachment = wp_get_attachment_image_src($image->ID, $size);
                ?>
                <div class="rea-con" style="background: url(<?php echo   
$attachment[0]; ?>) no-repeat center center;">  
                    <h4><a href="https://wordpress.stackexchange.com/questions/73217/<?php the_permalink(); ?>" title="<?php the_title();?>"><?php the_title(); ?></a></h4>
                </div>
               <?php } ?>
        <?php endforeach; ?>
    <?php $post = $tmp_post; ?>
</div>
</div>

How can I break up the section of older posts code so that by default it only pulls back the current months posts and then as they scroll down it will automatically display the previous months posts and then when they scroll down more it will automatically display the month before that’s posts?

I want to use the jQuery infinite scroll plugin to do this.

Any help is appreciated.

Thanks!

1 Answer
1

I assume this is a page or page template of some sort? I had a similar need so submitted a patch to the Infinite scroll plugin for the inclusion of a new filter infinite_scroll_load_javascript. By default the plugin doesn’t load on any singular posts/pages, but with this filter you can toggle it to load wherever you’d like.

function wpa_73217($load){
  if(is_page_template('my_special_template.php'))
       $load = true;
  return $load;
} 
add_filter('infinite_scroll_load_javascript', 'wp_73217');

Of course, you’r initialization scripts still have to work… aka you’re selectors have to be correct.

Leave a Comment