WordPress Post Type Infinite Scroll / Load more button

I am using the following code to currently display a specified amount (24) of my custom post types on WP, as well as using the project categories to filter through the posts dynamically.

            <!-- Display Filters for Posts --->
            <ul id="filters">
                <li><a href="#" data-filter="*" class="selected">Everything</a></li>
             $terms = get_terms("project_categories"); // get all categories, but you can use any taxonomy
             $count = count($terms); //How many are they?
             if ( $count > 0 ){  //If there are more than 0 terms
             foreach ( $terms as $term ) {  //for each term:
             echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>n";
             //create a list item with the current term slug for sorting, and name for label

        <!-- Filter Array --->
        <div class="row">
            <div class="col-md-12">

                    <?php $args = array( 'post_type' => 'bw_projects', 'posts_per_page' => 24 ); ?>

                    <?php $the_query = new WP_Query( $args ); ?>

                    <?php if ( $the_query->have_posts() ) : ?>
                        <ul class="img-list" id="isotope-list">
                        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
                     $termsArray = get_the_terms( $post->ID, "project_categories" );  //Get the terms for this particular item
                     $termsString = ""; //initialize the string that will contain the terms
                     foreach ( $termsArray as $term ) { // for each term 
                     $termsString .= $term->slug.' '; //create a string that has all the slugs 
                     <li class="<?php echo $termsString; ?>item project home-project"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?>
                             <a href="<?php echo get_permalink( $post->ID ); ?>">
                                 <?php the_post_thumbnail(); ?>
                                 <span class="text-content"><span><img src="<?php the_field('client_logo'); ?>" alt="" class=""></span></span>
                     </li> <!-- end item -->
                        <?php endwhile;  ?>
                        </ul> <!-- end isotope-list -->
                    <?php endif; ?>

        </div><!-- Close Filter Array --->

This was built using the Isotope filtering, from these intructions with a few modifications. https://www.aliciaramirez.com/2014/03/integrating-isotope-with-wordpress/

What i like to be able to do is when you have scrolled to the bottom of the specified amount of posts (24 currently), it either loads more on scroll or there is a load more button to do so. I have been looking at the Isotope docs and can see there is support for Infinite scroll, but i haven’t been able to get anything to work.

Can this be achieved? Thanks in advance!

Read more here: WordPress Post Type Infinite Scroll / Load more button

Leave a Reply

Your email address will not be published. Required fields are marked *