WordPress: Add Infinite Scrolling Pagination

1 Views

I’m very new to the WordPress. I’m currently using the FoundationPress theme and I’m trying to add a button that the user can click to load more post.

What I want is that initially the user will see four blog posts and when the user click on the read more button it will load the next four until there are no more posts and the button disappear.

Read More

I got up to the point where I can load the first four posts, but I’m having a hard time setting up a button to display the next four posts.

This is what I have so far: 

<section class="row blogArticleWrapper">
                <?php while ( have_posts() ) : the_post(); ?>
                <?php
                the_post();
                $blog_posts = get_posts( array(
                    'post_type' => 'blog',
                    'posts_per_page' => 4,
                    'offset' => 1,
                    'orderby' => 'date',
                    'order' => 'DESC'
                ) );
                if ( $blog_posts ):
                ?>
                <?php
                foreach ( $blog_posts as $post ):
                    setup_postdata($post);
                    ?>
                    <article class="blog-profile small-12 columns">
                        <a href="<?php the_field("news_url"); ?>" title="<?php the_title(); ?>"><span class="name"><?php the_field("news_title"); ?></span></a>
                        <p class="writtenBy">Written by: <?php the_field("news_written_by"); ?> <span class="date">Date: <?php the_field("news_date"); ?></span></p>
                    </article><!-- /.profile -->
                <?php endforeach;
                ?>
                <?php endif; ?>
                <?php endwhile; // end of the loop. ?>
</section><!-- /.row -->

I tried following this guide, but I don’t know how to use it on my page.

Any help is appreciated,

Thanks.

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. Remove:

    while ( have_posts() ) : the_post(); ?>

                the_post();

    and

    <?php endwhile; // end of the loop. ?>

    Change request to

    $paged = get_query_var('paged') ? get_query_var('paged') : 1;
$blog_posts = get_posts( array(
                    'post_type' => 'blog',
                    'posts_per_page' => 4,
                    'offset' => 1,
                    'paged' => $paged,
                    'orderby' => 'date',
                    'order' => 'DESC'
                ) );

    Add to functions.php

    function wp_corenavi() {
        global $wp_query;
        $pages = '';
        $max = $wp_query->max_num_pages;
        if (!$current = get_query_var('paged')) $current = 1;
        $a['base'] = str_replace(999999999, '%#%', get_pagenum_link(999999999));
        $a['total'] = $max;
        $a['current'] = $current;

        $total = 1; 
        $a['mid_size'] = 3; 
        $a['end_size'] = 1;
        $a['prev_text'] = '&laquo;'; 
        $a['next_text'] = '&raquo;'; 

        if ($max > 1) echo '<div id="pagination" class="navigation column medium-12">';
        if ($total == 1 && $max > 1) $pages = '<span class="pages">' . __('Page', 'Site') . $current . ' ' . __('of', 'Site') . ' ' . $max . '</span>'."rn";
        echo $pages . paginate_links($a);
        if ($max > 1) echo '</div>';
    }

    Add after endforeach; – wp_corenavi();wp_reset_postdata();;
    Then jQuery ajax: 

    //Trigger ajax at the end of page
           $(window).scroll(function(){
                    var top = $('body,html').scrollTop();
                    var height = $(window).height();
                    var docheight = $(document).height();

                    var screen = Number(docheight) - Number(height);

                    if( top >= screen ){
                        $('#pagination .next').click();
                    }
                });

            //do ajax on pagination
            $('#pagination .next').on('click',function(e){
                e.preventDefault();

                $('#pagination').remove();


                $.ajax({
                    type: "GET",
                    url: $(this).attr('href'),
                    dataType: "html",
                    success: function(out){

                        //We get blocks from next page , change selector to yours
                        result = $(out).find('.short-articles-wrapper-main .short-article');
                       //find next page pagination,change selector  to yours
                        pagination = $(out).find('.short-articles-wrapper-main #pagination');               
                       //append blocks from next page to current ,change selector to yours
                        $('.short-articles-wrapper-main').append(result);
                       //append pagination from next page to current, change selector to yours
                        $('.short-articles-wrapper-main').append(pagination.fadeIn(200));       
                    }
                });
            });

    Hope it will help you.