Load Posts Indefinitely in WordPress

If you run a WordPress website with a lot of blog posts, you may have noticed that your visitors have to click through several pages to access older posts. This can be frustrating for users and can negatively affect your website’s user experience. Luckily, there is a simple solution to this problem – a WordPress plugin that loads posts indefinitely. In this post, we’ll show you how to create a WordPress plugin to load posts indefinitely using technologies available in January 2014.

Step 1: Create the Plugin File The first step is to create a new file in your WordPress plugins directory. You can name it anything you like, but we’ll call it “load-more-posts.php”. This file will contain the plugin code.

Step 2: Enqueue the JavaScript In your plugin file, you’ll need to enqueue the JavaScript file that will handle the post loading. Here’s the code you’ll need:

function load_more_posts_scripts() {
wp_enqueue_script( 'load-more-posts', plugin_dir_url( FILE ) . 'load-more-posts.js', array('jquery'), '1.0', true );
wp_localize_script( 'load-more-posts', 'load_more_posts_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'load_more_posts_scripts' );

This code adds the “load-more-posts.js” file to your website and localizes the AJAX URL for use in the JavaScript file.

Step 3: Create the AJAX Callback Next, you’ll need to create the AJAX callback that will handle the post loading. Here’s the code you’ll need:

function load_more_posts_callback() {
$args = json_decode( stripslashes( $_POST['query'] ), true );
$args['paged'] = $_POST['page'] + 1;
$args['post_status'] = 'publish';

$query = new WP_Query( $args );

if( $query->have_posts() ) :
    while( $query->have_posts() ): $query->the_post();
        get_template_part( 'template-parts/content', 'excerpt' );
    endwhile;
endif;

wp_die();

}
add_action('wp_ajax_load_more_posts', 'load_more_posts_callback');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts_callback');

This code uses the WP_Query class to query for more posts and returns them using the get_template_part() function.

Step 4: Create the Load More Posts Button Finally, you’ll need to create the button that users will click to load more posts. Here’s the code you’ll need:

function load_more_posts_button() {
global $wp_query;
$max_pages = $wp_query->max_num_pages;

$args = array(
    'total' => $max_pages,
    'current' => $current_page,
    'prev_next' => true,
    'prev_text' => __('« Previous'),
    'next_text' => __('Next »'),
    'type' => 'plain',
    'add_args' => false,
    'add_fragment' => ''
);

if( $max_pages > 1 ) :

?>

<?php
endif;
}
add_action( 'wp_ajax_nopriv_load_more_posts', 'load_more_posts_button' );
add_action( 'wp_ajax_load_more_posts', 'load_more_posts_button' );

This code adds a button to your WordPress website that users can click to load more posts.

Step 5: Create the JavaScript File
Finally, you’ll need to create the “load-more-posts.js” file that will handle the AJAX request. Here’s the code you’ll need:

jQuery(function($) { $(document).on('click', '#load-more-posts a', function(event) { event.preventDefault();

var button = $(this),
    data = {
    'action': 'load_more_posts',
    'query': load_more_posts_ajax.query,
    'page': load_more_posts_ajax.page
};

$.ajax({
    url: load_more_posts_ajax.ajax_url,
    data: data,
    type: 'POST',
    beforeSend: function(xhr) {
        button.text('Loading...');
    },
    success: function(data) {
        if( data ) {
            button.text('Load more posts');
            $('#content').append(data);
            load_more_posts_ajax.page++;
            if( load_more_posts_ajax.page == load_more_posts_ajax.max_page )
                button.remove();
        } else {
            button.remove();
        }
    }
});

});

});

This code handles the AJAX request and appends the new posts to the existing ones.

Step 6: Use the Plugin
To use the plugin, simply activate it in the WordPress admin panel. Once activated, a “Load More Posts” button will appear on your blog page. When clicked, it will load more posts without the need for the user to click through multiple pages.

GitHub Repository: https://github.com/agilecyber/WordPress-Load-More-Posts-Plugin

In conclusion, loading posts indefinitely is a great way to improve the user experience on your WordPress website. By using this plugin, your users can easily access all your posts without having to navigate through multiple pages.