Wordpress/PHP Loop, Display first 3 items then click to load more

Question

I have created a loop that basically gets all "featured Images" (post thumbnails) & page titles from each page in my WordPress theme and displays them on the front page. That works great, here is the code so far:

<?php $args = array(
'sort_order' => 'asc',
'sort_column' => 'menu_order',
'hierarchical' => 1,
'exclude' => '',
'include' => '',
'meta_key' => '',
'meta_value' => '',
'authors' => '',
'child_of' => $post->ID,
'parent' => -1,
'exclude_tree' => '',
'number' => '',
'offset' => 0,
'post_type' => 'page',
'post_status' => 'publish'
); 
$pages = get_pages($args); 
?>  

<section id="blog"> 
   <div class="posts">
    <?php foreach ( $pages as $page ) : ?>
    <?php
        $background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'full' );
    ?>
        <div class="small post" style="background-image: url( '<?php echo $background[0]; ?>' );">

            <a href="<?php the_permalink( $page->ID ); ?>">
                <span class="inside">   
                    <h2><?php echo apply_filters( 'the_title', $page->post_title, $page->ID ); ?></h2>
                </span>
            </a>
        </div>
    <?php endforeach; ?>
    </div>
</section>

Problem: Because I have 10+ pages on my site, This code outputs all featured images at once. That is too much.

What I need: I would like to limit what I loop out to 3 featured images and then be able to click "View More" to load another "x" amount of featured images.

I have found a perfect example of what I need here: jQuery load first 3 elements, click "load more" to display next 5 elements But it just does not work for me, I am not sure if its because using a JQuery solution for a PHP loop is not the best solution.

Answer 1

In WordPress get_pages() add number Sets the number of Pages to list. This causes the SQL LIMIT value to be defined. Default to no LIMIT. and For View more you need to do with ajax and jQuery

Please check bellow code

Add this code in Your page where to display pages listing

<?php
$args = array(
'sort_order' => 'asc',
'sort_column' => 'menu_order',
'hierarchical' => 1,
'exclude' => '',
'include' => '',
'meta_key' => '',
'meta_value' => '',
'authors' => '',
'child_of' => $post->ID,
'parent' => -1,
'exclude_tree' => '',
'number' => 3,
'offset' => 0,
'post_type' => 'page',
'post_status' => 'publish'
); 
$pages = get_pages($args); 
?>
<section id="blog"> pages
   <div class="posts" id="addviewmoredata">
    <?php foreach ( $pages as $page ) : ?>
    <?php
        $background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'full' );
    ?>
        <div class="small post" style="background-image: url( '<?php echo $background[0]; ?>' );">

            <a href="<?php the_permalink( $page->ID ); ?>">
                <span class="inside">   
                    <h2><?php echo apply_filters( 'the_title', $page->post_title, $page->ID ); ?></h2>
                </span>
            </a>
        </div>
    <?php endforeach; ?>
    </div>
    <div><a href="#" id="viewmore" data-id="2">View More</a></div>
</section>

Add this jQuery code in your page where to display pages listing

<script>
jQuery(document).ready(function(){
    jQuery(document).on("click","#viewmore",function(){
        var page=jQuery(this).attr("data-id");
        jQuery.ajax('<?php echo admin_url('admin-ajax.php'); ?>', {
            type: "POST",
            data: {
                action:'custom_load_more',
                page:page,
                'postid':'<?php echo $post->ID; ?>',
            },
            cache: false,
            success: function (response) {
                //alert(response);
                if(response!="")
                {
                    jQuery("#addviewmoredata").append(response);

                    page++;

                    jQuery("#viewmore").attr("data-id",page);
                }
                else
                {
                    jQuery("#viewmore").remove();
                }
            },
            error: function (error) {
                if (typeof console === "object") {
                    console.log(error);
                }
            },
            complete: function () {
            }
        }); 
    });

});
</script>

Add this code in your function.php file.

function custom_load_more_callback( )
{

        global $wpdb;
        $paged = ( $_REQUEST['page'] ) ? $_REQUEST['page'] : 1; 
        $offset = ($paged - 1) * 3 + 1;

        $args = array(
        'sort_order' => 'asc',
        'sort_column' => 'menu_order',
        'hierarchical' => 1,
        'exclude' => '',
        'include' => '',
        'meta_key' => '',
        'meta_value' => '',
        'authors' => '',
        'child_of' => $_REQUEST['postid'],
        'parent' => -1,
        'exclude_tree' => '',
        'number' => 3,
        'offset' => $offset,
        'post_type' => 'page',
        'post_status' => 'publish'
        ); 
        $pages = get_pages($args); 

        ?>  
            <?php if(count($pages)){

            foreach ( $pages as $page ) : ?>
            <?php
                $background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'full' );
            ?>
                <div class="small post" style="background-image: url( '<?php echo $background[0]; ?>' );">

                    <a href="<?php the_permalink( $page->ID ); ?>">
                        <span class="inside">   
                            <h2><?php echo apply_filters( 'the_title', $page->post_title, $page->ID ); ?></h2>
                        </span>
                    </a>
                </div>
            <?php endforeach; } ?>



<?php
die();
}
add_action('wp_ajax_custom_load_more', 'custom_load_more_callback'); // Logged-in users
add_action('wp_ajax_nopriv_custom_load_more', 'custom_load_more_callback'); // Guest users