How to Add Load More Posts Button in WordPress

When you have more posts loaded on a page then you may experience a longer loading time on your site than expected. In that case, you need to optimize the page to load faster and there are several ways to do that. Some of the most commonly used methods are Pagination, Load More post, etc. Since we have discussed how to add pagination on your WordPress, let see how to add a load more posts button in your WordPress site in all possible ways.

Steps to Add Load More Posts Button in WordPress

[1] Download and Install the WordPress Infinite Scroll – Ajax Load More plugin from the WordPress Theme store.

[2] Once the theme installed, click on Activate to activate the theme on your WordPress site.

[3] From the Dashboard, click on Ajax Load More.

[4] Here you can change Container type, container class, Button/loading style in the Ajax Load More page.

[5] Click on Save settings, to apply changes you made.

[5] Then click on Repeater Template from the Ajax Load More settings and add the following code replacing the default one.

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php
// Post thumbnail.
twentyfifteen_post_thumbnail();
?>
 
<header class="entry-header">
<?php
if ( is_single() ) :
the_title( '<h1 class="entry-title">', '</h1>' );
else :
the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
endif;
?>
</header><!-- .entry-header -->
 
<div class="entry-content">
<?php
/* translators: %s: Name of current post */
the_content( sprintf(
__( 'Continue reading %s', 'twentyfifteen' ),
the_title( '<span class="screen-reader-text">', '</span>', false )
) );
 
wp_link_pages( array(
'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>',
'after'       => '</div>',
'link_before' => '<span>',
'link_after'  => '</span>',
'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%',
'separator'   => '<span class="screen-reader-text">, </span>',
) );
?>
</div><!-- .entry-content -->
 
<?php
// Author bio.
if ( is_single() && get_the_author_meta( 'description' ) ) :
get_template_part( 'author-bio' );
endif;
?>
 
<footer class="entry-footer">
<?php twentyfifteen_entry_meta(); ?>
<?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<span class="edit-link">', '</span>' ); ?>
</footer><!-- .entry-footer -->
 
</article><!-- #post-## -->

[6] Once the code is pasted and edited according to your site, click on Save Template.

[7] Now from Ajax Load More settings, choose Shortcode builder.

[8] There you can choose Template, post type, post format, post per page, etc.

[9] Now you have successfully added Load More Posts on your WordPress.

Add Load More Posts in WordPress Theme

[1] Open your Template page on your WordPress.

[2] Look for categories.php, index.php, archives.php, etc. where you want to add load more posts button in your theme.

[3] In that code add the following line of shortcode after the endwhile; tag.

echodo_shortcode('[ajax_load_more container_type="div" post_type="post"]'); 

[4] Now save the changes and go to the website.

[5] Here you can see the Load more posts button.

Conclusion

These are some of the ways to optimize your site speed without affecting any content on your article. Hope this article helps you add the Load More Post button on your page. If you have any doubts make use of the comments section below. For more WordPress guides, explore our blog.