How to load only posts not already on the page?

You need to build an array and pass it to ALM.
See this gist – https://gist.github.com/dcooney/9b037efbd166b4dba5ae#file-gistfile1-php

In the loop above you would need to build an array like this and then add it as an exclude parameter..

$post_ids = array();
while (have_posts()) : the_post();
   $post_ids[] = get_the_ID();
}

Thank you for your help! I’m still new a little new to php and WordPress development…could you help me understand what this solution would look like for my code? Here’s my current code:

<?php $loop = new WP_Query( array( 'post_type' => 'design-notes', 'posts_per_page' => 9, 'orderby' => 'rand' ) ); ?>
    <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

      <div class="col-sm-4 note" style="background:url('<?php the_field('color_thumbnail_image'); ?>') no-repeat -9999px -9999px;">
        <a href="<?php the_permalink(); ?>">
          <div class="note-title" onMouseOver="changeBgImage('<?php the_field('color_thumbnail_image'); ?>', '<?php the_field('design_note_number'); ?>')" onMouseOut="changeBgImage('<?php the_field('grayscale_thumbnail_image'); ?>', '<?php the_field('design_note_number'); ?>')">
            <p class="title"><?php the_title(); ?></p>
          </div> <!-- /.note-title -->
          <div class="note-image" id="<?php the_field('design_note_number'); ?>" style="background:url('<?php the_field('grayscale_thumbnail_image'); ?>');" onMouseOver="changeBgImage('<?php the_field('color_thumbnail_image'); ?>', '<?php the_field('design_note_number'); ?>')" onMouseOut="changeBgImage('<?php the_field('grayscale_thumbnail_image'); ?>', '<?php the_field('design_note_number'); ?>')">
          </div> <!-- /.note-image -->
        </a>
      </div> <!-- /.col-sm-4 -->

    <?php endwhile; wp_reset_query(); ?>

    <?php echo do_shortcode('[ajax_load_more post_type="design-notes" orderby="rand" transition="fade" posts_per_page="3" scroll="false" pause="true" button_label="Load More Design Notes"]'); ?>

Thank you so much – I really appreciate your time and help!

I didn’t test this, but it should work.

<?php
   $post_ids = array();
   $loop = new WP_Query( array( 'post_type' => 'design-notes', 'posts_per_page' => 9, 'orderby' => 'rand' ) ); ?>
    <?php while ( $loop->have_posts() ) : $loop->the_post();
       $post_ids[] = get_the_ID();
    ?>

      <div class="col-sm-4 note" style="background:url('<?php the_field('color_thumbnail_image'); ?>') no-repeat -9999px -9999px;">
        <a href="<?php the_permalink(); ?>">
          <div class="note-title" onMouseOver="changeBgImage('<?php the_field('color_thumbnail_image'); ?>', '<?php the_field('design_note_number'); ?>')" onMouseOut="changeBgImage('<?php the_field('grayscale_thumbnail_image'); ?>', '<?php the_field('design_note_number'); ?>')">
            <p class="title"><?php the_title(); ?></p>
          </div> <!-- /.note-title -->
          <div class="note-image" id="<?php the_field('design_note_number'); ?>" style="background:url('<?php the_field('grayscale_thumbnail_image'); ?>');" onMouseOver="changeBgImage('<?php the_field('color_thumbnail_image'); ?>', '<?php the_field('design_note_number'); ?>')" onMouseOut="changeBgImage('<?php the_field('grayscale_thumbnail_image'); ?>', '<?php the_field('design_note_number'); ?>')">
          </div> <!-- /.note-image -->
        </a>
      </div> <!-- /.col-sm-4 -->

    <?php endwhile; wp_reset_query(); ?>

    <?php
      if($post_ids){
         //Implode the posts and set a variable to pass to our exclude param.
         $postsNotIn = implode(",", $post_ids);
      }
       echo do_shortcode('[ajax_load_more post_type="design-notes" orderby="rand" transition="fade" exclude="'.$postsNotIn.'" posts_per_page="3" scroll="false" pause="true" button_label="Load More Design Notes"]'); ?>

Seems to be working – thank you!!

No problem!