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.

It not only enhances the user experience but also helps you to post more content on a single page. It is a tool specifically useful for photography, travel and viral content blogs.

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 plug-ins 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 plug-ins 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 in 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<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 plug-in 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 plug-ins.

These are:

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.

Easy Load More

WP Load More Posts

If you’re looking for a plug-in 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 plug-in you use, as long as your website’s design is easy to use and understand, your visitors will keep coming back for more!

How to Add Load More Posts Button in WordPress
5 (100%) 1 vote

Total
1
Shares

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*