In this post I am going to show how to add load more posts to WordPress Site without plugin
Step 1. Create a index.php file
create index.php file in current activate theme folder
index.php
<?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();
create template-parts folder and add loop-post.php
template-parts/loop-post.php
<?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>
create add content-none.php file within template-parts folder
template-parts/content-none.php
<?php /** * The template part for displaying a message that posts cannot be found */ ?> <div class="content"> <p><?php __( 'It seems we can’t find what you’re looking for. Perhaps searching can help.' ); ?></p> </div>
Step 2. Add image size
functions.php
// 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' );
Step 3. Enqueue script
functions.php
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' );
Step 4. Create load-more.js file
assets/js/load-more.js
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(); } } } ); } ); } );
Step 5. Work with WordPress Ajax
functions.php
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' );
Leave a Reply