Load more posts

loadmore.php

<?php
/**
 * Display courses using a shortcode 
 * @author Archie M
 *
 *
 */
function short_courses_loop( $atts ) {

	// Extract shortcode attributes
    extract( shortcode_atts( array(
    	'post_type' 		=> 'courses',
    ), $atts ));

	// Query arguments 
    $args_default = array(
    	'post_type'			=> $post_type,
        'posts_per_page'	=> 3,
 	);
    
    // Run Query 
    $query_default = new WP_Query($args_default);
    
    // Output
	ob_start();
    
    if( $query_default->have_posts() ) { ?>
    
    	<div id="short-courses" class="short-courses">
        
            <?php while( $query_default->have_posts() ) { ?>

                <?php $query_default->the_post(); ?>

				<div class="short-course-item">
                	<h2>
                    	<a href="<?php the_permalink(); ?>">
                        	<?php the_title(); ?>
                       	</a>
                    </h2>
                
                </div>


            <?php } ?>
        
        </div>
        
        <!-- View More Courses --> 
        <button class="view-more-button">View More</button>
        
        <!-- More courses -->
        <?php
        $args_all = array(
        	'post_type' 		=> $post_type, 
            'posts_per_page'	=> -1, 
            'offset'			=> 3,	// Exclude the first 3
        );
        
        $query_all = new WP_Query( $args_all );
        
        if( $query_all->have_posts() ) {

        	while( $query_all->have_posts() ) { ?>

            	<div class="short-course-item">
                	<h2>
                    	<a href="<?php the_permalink(); ?>">
                        	<?php the_title(); ?>
                       	</a>
                    </h2>
                
                </div>
                
        	<?php }
            
        }
        
        
	} else {  ?>
    
    	<h3>No courses were found.</h3>
    
    <?php }
    
    wp_reset_postdata();
    return ob_start();

}
add_shortcode( 'shortcourses', 'short_courses_loop' ); 

============
	
	
	
	function short_courses_loop( $atts ) {

    // Extract shortcode attributes
    extract( shortcode_atts( array(
        'post_type'         => 'courses',
    ), $atts ));

    // Query arguments 
    $args_default = array(
        'post_type'         => $post_type,
        'posts_per_page'    => 3,
    );
    
    // Run Query 
    $query_default = new WP_Query($args_default);
    
    // Output
    ob_start();
    
    if( $query_default->have_posts() ) { ?>
    
        <div id="short-courses" class="short-courses">
        
            <?php while( $query_default->have_posts() ) { ?>

                <?php $query_default->the_post(); ?>

                <div class="short-course-item">
                    <h2>
                        <a href="<?php the_permalink(); ?>">
                            <?php the_title(); ?>
                        </a>
                    </h2>
                
                </div>


            <?php } ?>
        
        </div>
        
        <!-- View More Courses --> 
        <button id="view-more-button" class="view-more-button">View More</button>
        
        <script>
        jQuery(function($){
            $('#view-more-button').on('click', function(e){
                e.preventDefault();
                var offset = $('.short-course-item').length; // Calculate the offset
                $.ajax({
                    type: 'POST',
                    url: '<?php echo admin_url('admin-ajax.php'); ?>',
                    data: {
                        action: 'load_more_courses',
                        offset: offset,
                        post_type: '<?php echo $post_type; ?>'
                    },
                    success: function(response){
                        $('.short-courses').append(response);
                    }
                });
            });
        });
        </script>
        
    <?php } else {  ?>
    
        <h3>No courses were found.</h3>
    
    <?php }
    
    wp_reset_postdata();
    return ob_get_clean();

}
add_shortcode( 'shortcourses', 'short_courses_loop' ); 

// AJAX handler
add_action('wp_ajax_load_more_courses', 'load_more_courses_callback');
add_action('wp_ajax_nopriv_load_more_courses', 'load_more_courses_callback');

function load_more_courses_callback() {
    $offset = $_POST['offset'];
    $post_type = $_POST['post_type'];

    $args = array(
        'post_type'         => $post_type,
        'posts_per_page'    => 3,
        'offset'            => $offset
    );

    $query = new WP_Query($args);

    if( $query->have_posts() ) {
        while( $query->have_posts() ) {
            $query->the_post();
            ?>
            <div class="short-course-item">
                <h2>
                    <a href="<?php the_permalink(); ?>">
                        <?php the_title(); ?>
                    </a>
                </h2>
            </div>
            <?php
        }
    }

    wp_die();
}