How to Add a Load More Posts Button in WordPress

<?php
global $wp_query;
$max = $wp_query->max_num_pages;
get_header(); ?>

	<main role="main">
		<div class="container">
			<br>
			<h1 class="text-center"><?php echo get_the_title( get_option( 'page_for_posts' ) ); ?></h1>
			<?php if ( have_posts() ): ?>
				<div class="row js-posts">
					<?php while ( have_posts() ):
						the_post(); ?>
						<div class="col-md-4"><?php get_template_part( 'template-parts/loop', 'post' ); ?></div>
					<?php endwhile; ?>
				</div>
			<?php else:

				get_template_part( 'template-parts/content', 'none' );
			endif;

			if ( $max > 1 ):?>
				<div class="text-center">
					<a href="#" class="btn btn-primary js-load-more">More posts</a>
				</div>
			<?php endif; ?>
			<br>
		</div>

	</main>

<?php get_footer();

<?php
$comment = get_comments_number();
?>
<div class="card" style="width: 18rem; margin: 20px auto">
	<?php if ( has_post_thumbnail() ): ?>
		<img class="card-img-top" src="<?php the_post_thumbnail_url( 'post-thumb' ); ?>" alt="Card image cap">
	<?php endif; ?>
	<div class="card-body">
		<?php echo get_the_date( 'F d Y' ); ?> - (<?php echo ( $comment ) ? $comment : '0'; ?>)

		</br></br>
		<h5 class="card-title"><?php the_title(); ?></h5>
		<p class="card-text"><?php the_excerpt(); ?></p>
		<a href="<?php the_permalink(); ?>" class="btn btn-primary">Read More</a>
	</div>
</div>

<?php
/**
 * The template part for displaying a message that posts cannot be found
 */
?>

<div class="content">
	<p><?php __( 'It seems we can&rsquo;t find what you&rsquo;re looking for. Perhaps searching can help.' ); ?></p>
</div>

// enable post thumbnail option start here
add_theme_support( 'post-thumbnails' );

// enable image cropping sizes start here
function base_theme_image_theme_setup() {
	add_image_size( 'post-image', 320, 260, true );
	add_image_size( 'post-thumb', 520, 460, true );
}
add_action( 'after_setup_theme', 'base_theme_image_theme_setup' );

function base_theme_scripts() {
	if ( ! is_admin() ) {
		global $wp_query;

		// load a JS file from Base-Theme
		wp_enqueue_script( 'jquery' );


		wp_enqueue_script( 'load-more', get_template_directory_uri() . '/assets/js/load-more.js', [ 'jquery' ], '1.0.0', true );

		wp_localize_script( 'load-more', 'load_more_params', [
			'ajax_url'     => admin_url( 'admin-ajax.php' ),
			'current_page' => get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1,
			'max_page'     => $wp_query->max_num_pages
		] );
	}
}

add_action( 'wp_enqueue_scripts', 'base_theme_scripts' );

jQuery( function( $ ) {
	$( '.js-load-more' ).click( function( e ) {
		e.preventDefault();
		var button = $( this ),
			data = {
				'action': 'load_posts',
				'page': load_more_params.current_page,
			};

		$.ajax( {
			url: load_more_params.ajax_url,
			data: data,
			type: 'POST',
			beforeSend() {
				button.text( 'Loading...' )
			},
			success( data ) {
				if ( data ) {
					button.text( 'More posts' );
					$( '.js-posts' ).append( data );
					load_more_params.current_page++;

					if ( load_more_params.current_page == load_more_params.max_page ) {
						button.remove();
					}
				} else {
					button.remove();
				}

			}

		} );
	} );
} );

function load_posts() {

    $paged = $_POST['page'] + 1;

    if ( ! empty( $paged ) ) {

        $args = [
            'post_type' => 'post',
            'posts_per_page' => get_option('posts_per_page'),
            'paged'     => $paged,
        ];

        $my_post = new WP_Query( $args );

        while ( $my_post->have_posts() ):
            $my_post->the_post(); ?>
            <div class="col-md-4"><?php get_template_part( 'template-parts/loop', 'post' ); ?></div>
        <?php endwhile;
        wp_reset_postdata();
    }

    wp_die();
}

add_action( 'wp_ajax_load_posts', 'load_posts' );
add_action( 'wp_ajax_nopriv_load_posts', 'load_posts' );