Load WordPress posts via a custom API endpoint with pagination support.

events_template.php

<div class="posts-container">
    <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <div>
            <?php
                //Here we group events by event_date and put the date at the top.
                $event_date =  get_post_meta( $post->ID, 'event_date', true );
                if ( $event_date != $date )
                {
                    $event_date_formatted = date( 'l, F jS, Y', strtotime( $event_date ) );
                    echo "<p class='page-header'><strong>$event_date_formatted</strong></p>";
                    $date = $event_date;
                }
            ?>
            <div class="event ath-card">
                <h4><?php the_title(); ?></h4>
                <p><?php echo get_post_meta( $post->ID, 'event_location', true ) ?></p>
                <p><?php echo get_post_meta( $post->ID, 'event_details', true ) ?></p>
            </div>
        </div>
    <?php endwhile; endif; ?>
</div>

<div class="loader text-center hidden">
    <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>

<div class="div pagination-container text-center">
    <?php if ( $next_page ) : ?>
        <a href="http://localhost:8888/water/wp-json/events/v1/events/page/<?php echo $next_page ?>/?event_date=<?php echo $request["event_date"] ?> ">
            <button class='ath-btn ath-btn-info'>LOAD MORE</button>
        </a>
    <?php endif; ?>
</div>

functions.php

<?php
//Endpoint for getting events
function water_endpoints()
{
    register_rest_route('events/v1', '/events/page/(?P<paged>\d+)/', array(
        'methods' => 'GET',
        'callback' => 'get_events'
    ));
}
add_action( 'rest_api_init', 'water_endpoints' );

process-get-events.php

<?php

function get_events(WP_REST_Request $request)
{
    global $post;

    $event_date = $request["event_date"];
    $paged      = ($request["paged"]) ? $request["paged"] : 1;
    $date = '';

    $args = array(
        'post_type'      => 'event',
        'posts_per_page' => 3,
        'paged'          => $paged,
        'meta_key'       => 'event_date',
        'meta_value'     => $event_date,
        'meta_compare'   => '>=',
        'orderby'        => 'meta_value',
        'order'          => 'ASC'
    );

    $the_query = new WP_Query( $args );

    ob_start();
    
    if($paged < $the_query->max_num_pages)
    {
        $next_page = $paged + 1;
    }
    else
    {
        $next_page = null;
    }
    include(locate_template('events_template.php'));

    $events = ob_get_contents();
    ob_get_clean();
    
    return $events;

}