How to create and add Load More Posts Button in WordPress

Do you want to add more post buttons loaded in WordPress? Many popular platforms allow users to load more posts when they reach the bottom of the page. In this article, we will show you how to easily add more post buttons loaded in WordPress.

Add more buttons when and why load in WordPress

Keeping your users engaged with the content helps you get more views and ultimately more subscribers.

Many blogs use the navigation links of simple er old posts at the end of their home, blog and archive pages. Some websites use numerical page navigation which adds more context.

However, there are some types of websites that can benefit more from infinite scrolls or load more post buttons. Some examples include: photography website, catalog, and viral content website.

Instead of loading an entire new page, the 'load more posts' button acts like an infinite scroll. It uses to JavaScript to quickly fetch the next set of content. This improves the user experience and gives them a chance to see your content more.

That being said, let's take a look at how to easily add more post buttons loaded into your WordPress site.

Add more post buttons loaded in wordpress

First of all you have to install and activate the Ajax Load More plugin. For more details, see our step guide on how to install the WordPress plugin.

Upon activation, the plugin will add a new menu item to your WordPress admin menu, labeled Ajax Load More. You have to click on it and go to the settings page of the plugin.

On the Settings page, you can choose the color of your button. You can also replace the button with an infinite scroll that automatically loads the next batch of posts without clicking the button.

Next, you need to visit the Ajax Load More »Repeater Template page to add your template to display the post.

The plugin comes with a basic template that contains a WordPress loop to display posts. However, it does not match your theme and may be outside your website.

To fix this, you need code that uses your topic to display posts on indexes, archives, and blog pages.

Typically, this code is located in the template-parts folder of your theme. In that folder, you will see templates to display various contents. For example content-page.php, content-search.php, and more.

You will search for general content. Here is an example from the content of our demo theme. PDF 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 that code, you have to paste it inside the Repeater Templates field in the plugin settings.

Be sure to click the Template Save Template button to store your settings.

Next, you have to go to the Ajax Load More »Shortcode Builder page to create a shortcode.

This page has many different options that you can customize. First you have to select the container type. If you are unsure, first look at the template you copied. Most modern subjects use </div>< Element.

Next scroll down to the button labeled section. Here you can change the text that appears on the button. By default, the plugin uses 'old posts', and you can change it to 'load more posts' or anything you want.

Finally, you need to choose whether you want to load posts automatically or wait for users to click the Load More Posts button.

Now your shortcode is ready to use. In the right column, you will see the shortcode output. Go ahead and copy the shortcode and paste it into the text editor as you will need it in the next step.

Add loads more posts to your WordPress theme

For this part of the tutorial you will need to add code to your WordPress theme files. If you haven't done so before, have a look at our guide on how to copy and paste code in WordPress.

Be sure to backup your WordPress theme before making any changes.

You will need to find the template files where you want to add more post buttons loaded to your theme. Depending on how your topic is organized, these files are usually index.php, archives.php, category.php etc.

You will need to add the previously copied shortcode to your subject after the end; Tag.

Since we are adding the shortcode to the theme file, we need to add it inside the do_shortcode function, such as:

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

Now you can save your changes and go to your website to see the 'Load more posts' button in action.

• How to Add Pinterest “Pin It” Button in WordPress
• How to add custom navigation menus to WordPress themes
• How to Add Multi-Currency Support on WooCommerce Store
• How to Create a WordPress Responsive Theme Based on Bootstrap