treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Infinite scroll help needed

  • Hey all,

    still working on this wordpress theme: Tingeltangel

    In the archive I have masonry ordered thumbnails which i would like to be paginated with infinite scroll. but therefore I would need a second pagination (a next / prev pagination is already applied to the fullscreen image post). I'm totally stuck and I don't know how I'm supposed to get infinite scroll working.

    Here's my Index.php

    <?php get_header(); ?>
    
    <?php $page = (get_query_var('paged')) ? get_query_var('paged') : 1; ?>
    <?php query_posts(array('posts_per_page' => '1', 'paged'=>$page)); ?>
      <?php while (have_posts()) : the_post(); ?>
        <div id="main"<?php if ( $thumbnail_id = get_post_thumbnail_id() ) {
                if ( $image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg' ) )
                    printf( ' style="background-image: url(%s);"', $image_src[0] );}?>>
    
            <div class="logo">
              <a href="<?php bloginfo('url'); ?>"><img src="<?php print IMAGES; ?>/logo.png" alt="<?php bloginfo('name'); ?>" /></a>
            </div>
    
            <div class="navlinkcontainer">
              <a id="archivelink" class="navlink" href="#">archive</a>
              <?php next_posts_link('next'); ?>
              <?php previous_posts_link('Previous'); ?>
            </div>
    
        <article>
            <h2><?php the_title(); ?></h2>
            <p><a href="<?php the_permalink(); ?>"><?php the_time('jS F Y'); ?></a></p>
            <?php the_content(''); ?>
        </article>
      <?php endwhile; ?>
    
      </div>
    
    <?php wp_reset_query(); ?>
    

    <

    div id="archive">

        <header>
          <a id="close" class="navlink" href="#">close</a>
        </header>
    
    
      <div id="masonry">
    
      <?php if (have_posts()) : while (have_posts()) : the_post();
       if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>
        <div class="box"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('medium'); ?></a>
          <h3><?php the_title(); ?></h3>
          <h4><?php the_time('jS F Y'); ?></h4>
            <span class="rollover">
              <?php the_tags( '<div class="tags">', '', '</div>'); ?>
            </span>
       </div>
    
    <?php endwhile; endif; ?>
    
    </div>
    
    <?php get_footer(); ?>
    

    Help is very appreciated!

  • no idea?

  • I take it you've read through the links highlighted at the masonry website? http://masonry.desandro.com/demos/infinite-scroll.html

  • sure I did. the trouble is setting up a second pagination because the infinite scroll plugin for WP needs a link to load more posts. i don't know how to achieve that...