Even Google added load more button on the mobile devices search, so it is important and helpful for the users if you have a quick load more button to check more posts on your site.
With an eye towards improving user experience, many popular websites across the internet have added a feature where users can load more posts once they reach the bottom of a page.
If you are managing a viral content blog the load more feature becomes even more important because it will help you to keep the visitor occupied with more content.
These days most of the quality WordPress theme offers you the built-in option of the load more navigation. If you are using a theme from the MyThemeShop store which is one of the most popular WordPress theme stores, they readily offer you the load more navigation feature.
In an earlier post, we showed you how to add infinite scroll to your website. Here, we will show you how you can add the load more button in WordPress.
Adding Load More Posts Button in WordPress
Though there are many plugins that can help you in activating the load more posts button in your website (more on that later), Ajax Load More plugin is one of the most used and tested plugins for adding load more posts button.
The first thing you need to do is install and activate the Ajax Load More plugin. Once it is activated, a new menu item with the name “Ajax Load More” will be added to your website’s WordPress Dashboard.
The next step is to open the menu and navigate to the settings page in the plugin.
Ajax Load More Settings
The plugin offers plenty of customizations in terms of usage and color scheme. You can change the color of load more posts button on the settings page of the plugin.
The plugin also offers the replacement of the button with an infinite scroll which can load more posts without actually clicking any button.
Next, click on Ajax Load More>Repeater Template Page; it will add a template for displaying posts.
The plugin has a basic template by default that contains the loop to display posts. However, there is a chance that it may not match with your website’s theme.
In this case, you can customize the template according to your preferences.
You can do it by copying your theme’s code that is used to display archive, display, and blogs.
This code is usually located in your theme in the “template-parts” folder. The folder contains templates that display content of different types. For instance, content-page.php, content-search.php etc.
Within all the available templates, look for the generic content.php template. Check out this example of a demo theme’s content.php file:
<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-## -->
Once you find the code, submit it in the plugin settings by pasting it into Repeater Templates. Save your settings by clicking on “Save Template”.
Once your template’s coding is saved, generate the plugin shortcode by visiting Ajax Load More > Shortcode builder.
This option can be used for customizing different options such as container type, label text, automatic or manual load more button etc.
Once your shortcode settings are saved, you can use it by copying the shortcode and pasting it in a text editor.
This easy to install and easy to activate plugin will help you in adding the load more posts button in a hassle-free manner.
However, some other options are also available for load more post plugins.
Easy Load More
Easy Load More provides you with highly advanced customizations without slowing your website down. It offers highly styled buttons that can be customized in terms of colors as well as animation.
WP Load More Posts
If you’re looking for a plugin that does a hassle-free integration of load more posts button with your website, then WP Load More Posts is probably the best choice.
No matter which plugin you use, as long as your website’s design is easy to use and understand, your visitors will keep coming back for more!