0

I need some help please. I have created a shortcode to pull in posts, then using ajax it loads more posts. I have everything working but it is duplicating the first group of posts. below is my code.

This is the shortcode function:

add_shortcode( 'articles-grid', 'articles_grid' );
function articles_grid( $atts ) {

    $showdate = $showauthor = $post_meta = $post_author = $post_seperator = $post_published = $has_featured_article = $data_class = $results = $trend_class = '';

    extract( shortcode_atts( array (
        'offset'        => 0,
        'showdate'      => null,
        'trending'      => null,
        'category'      => null,
        'exclude'       => null,
        'showauthor'    => null,
        'init'          => 1
    ), $atts ) );

    $exclude_ids = array_map('intval', explode(',', $exclude));

    $exclude_featured = array(391);

    $exclude_cats = array_merge($exclude_featured,$exclude_ids);

    ob_start();

    if($trending) 
        $posts_per_page = 6;
    else
        $posts_per_page = get_option( 'posts_per_page' ) * $init;

    $query = new WP_Query( array(
        'posts_per_page' => $posts_per_page,
        'offset' => $offset,
        'category__not_in' => $exclude_cats,
        'category__in' => $category,
        'orderby' => 'post_date',
        'order' => 'DESC',
        'post_type' => 'post',
        'post_status' => 'publish',
        'ignore_sticky_posts' => true,
    ) );

    if ( $query->have_posts() ) { 

        $published_posts = $query->found_posts;
        $page_number_max = ceil($published_posts / $posts_per_page);
    ?>
        <div id="main-posts" class="recent-posts-grid-container ajax_posts">
            <?php 
                $all_post_cats = array();
                $count = 1;
            ?>
            <?php while ( $query->have_posts() ) : $query->the_post(); ?>
                <?php
                $cats = get_the_category(get_the_ID());
                $thumb = get_the_post_thumbnail_url( get_the_ID(), 'full');

                $posted_time_diff = human_time_diff( get_the_time('U',get_the_ID()), current_time('timestamp') );

                $author_id = get_post_field ('post_author', get_the_ID());
                $author_name = get_the_author_meta( 'display_name', $author_id );

                $seperator = ' | ';

                if($showdate || $showauthor) {

                    if($showauthor) {

                        $post_author = et_get_safe_localization( sprintf( __( '%1$s', 'et_builder' ), '<span class="author">' . esc_html( $author_name ) . ' </span>' ) );

                    }

                    if($showdate && $showauthor) {

                        $post_seperator = $seperator;

                    }

                    if($showdate) {

                        $post_published = et_get_safe_localization( sprintf( __( '%s', 'et_builder' ), '<span class="published">' . esc_html( $posted_time_diff ) . ' ago </span>' ) );

                    }

                    $post_meta = '<p class="post-meta">'.$post_author.$post_seperator.$post_published.'</p>';

                }

                foreach($cats as $cat) {
                    if($cat->term_id != 391)
                        $all_post_cats[] = 'cat-'.$cat->slug;
                }
                ?>
                <article class="<?php echo $count; ?> recent-article <?php echo implode(' ',$all_post_cats); ?>">
                        <a href="<?php the_permalink(); ?>">
                            <div class="recent-post-featured-image-container">   
                                <div class="recent-post-featured-image" style="background-image: url(<?php echo $thumb; ?>)"></div> 
                            </div>
                            <div class="recent-post-content">
                                <div class="recent-post-title"><?php the_title(); ?></div>
                                <?php echo $post_meta; ?>
                            </div>
                        </a>
                </article>
                <?php
                    $count++;

                    unset($all_post_cats);
                ?>
            <?php endwhile;
            wp_reset_postdata(); ?>

            <?php
                if($trending) {

                    echo '<article class="trending-container '.$trend_class.'"><h2>Trending</h2>'.do_shortcode('[wpp range="last7days" limit=6 stats_views=1 order_by="views" excerpt_length=110 post_html=\'<li>{title}</li>\']').'</article>';

                }
            ?>
        </div>

        <?php
            // don't display the button if there are not enough posts
            if (  $page_number_max > 1 ) :
                echo '<div class="load-more-posts-btn-container"><a href="#" class="load-more-posts" data-showauthor="'.$showauthor.'" data-showdate="'.$showdate.'" data-trending="'.$trending.'" data-exclude="['.implode(',',$exclude_cats).']">More Stories</a></div>';
            endif;
        ?>

    <?php $myvariable = ob_get_clean();
        return $myvariable;

    }

}

This is the ajax call:

$('body .load-more-posts').on('click',function(e){
        e.preventDefault();

        var showauthor = $(this).data('showauthor');
        var showdate = $(this).data('showdate');
        var trending = $(this).data('trending');
        var exclude = $(this).data('exclude');

        // need this to determine when to hide the button
        var page_number_max = Math.ceil(myData.found_posts / myData.post_per_page);

        $.ajax({
            url : myData.ajaxurl, // AJAX handler
            data : {
                'action': 'loadmore', // the parameter for admin-ajax.php
                'query': myData.posts, // loop parameters passed by wp_localize_script()
                'cat' : myData.category,
                'page' : myData.current_page, // current page
                'posts_per_page' : myData.post_per_page,
                'showauthor' : showauthor,
                'showdate' : showdate,
                'trending' : trending,
                'exclude' : exclude,
            },
            type : 'POST',
            beforeSend : function ( xhr ) {
                $('.load-more-posts').text('Loading...'); // some type of preloader
            },
            success : function( data ){
                if( data ) {

                    $('.load-more-posts').text( 'More Stories' );
                    $('#main-posts').append(data); // insert new posts
                    myData.current_page++;

                    if ( myData.current_page == page_number_max ) 
                        $('.load-more-posts-btn-container').hide(); // if last page, HIDE the button

                } else {
                    $('.load-more-posts-btn-container').hide(); // if no data, HIDE the button as well
                }
            }
        });

        return false;

    });

And this is the call back function:

add_action('wp_ajax_loadmore', 'categories_loadmore_ajax_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore', 'categories_loadmore_ajax_handler'); // wp_ajax_nopriv_{action}

function categories_loadmore_ajax_handler(){

    $showdate = $showauthor = $post_meta = $post_author = $post_seperator = $post_published = $has_featured_article = $data_class = $results = $trend_class = '';

    $showdate = $_POST['showdate'];
    $showauthor = $_POST['showauthor'];
    $trending = $_POST['trending'];

    $posts_per_page = get_option( 'posts_per_page' );

    $args = array(
        'cat' => $_POST['cat'],
        'category__not_in' => $_POST['exclude'],
        'paged' => $_POST['page'] + 1,
        'posts_per_page' => $_POST['posts_per_page'],
        'post_status' => 'publish',
    );

    // it is always better to use WP_Query but not here
    query_posts( $args );

    if( have_posts() ) :

        $all_post_cats = array();
        $count = 1;

        // run the loop
        while( have_posts() ): the_post();

            $trending= 1;
            $showdate = 0;
            $showauthor = 1;
            $cats = get_the_category(get_the_ID());
            $thumb = get_the_post_thumbnail_url( get_the_ID(), 'full');

            $posted_time_diff = human_time_diff( get_the_time('U',get_the_ID()), current_time('timestamp') );

            $author_id = get_post_field ('post_author', get_the_ID());
            $author_name = get_the_author_meta( 'display_name', $author_id );

            $seperator = ' | ';

            if($showdate || $showauthor) {

                if($showauthor) {

                    $post_author = et_get_safe_localization( sprintf( __( '%1$s', 'et_builder' ), '<span class="author">' . esc_html( $author_name ) . ' </span>' ) );

                }

                if($showdate && $showauthor) {

                    $post_seperator = $seperator;

                }

                if($showdate) {

                    $post_published = et_get_safe_localization( sprintf( __( '%s', 'et_builder' ), '<span class="published">' . esc_html( $posted_time_diff ) . ' ago </span>' ) );

                }

                $post_meta = '<p class="post-meta">'.$post_author.$post_seperator.$post_published.'</p>';

            }

            foreach($cats as $cat) {
                if($cat->term_id != 391)
                    $all_post_cats[] = 'cat-'.$cat->slug;
            }

            ?>

            <article class="<?php echo $count; ?> recent-article <?php echo implode(' ',$all_post_cats); ?>">
                    <a href="<?php the_permalink(); ?>">
                        <div class="recent-post-featured-image-container">   
                            <div class="recent-post-featured-image" style="background-image: url(<?php echo $thumb; ?>)"></div> 
                        </div>
                        <div class="recent-post-content">
                            <div class="recent-post-title"><?php the_title(); ?></div>
                            <?php echo $post_meta; ?>
                        </div>
                    </a>
            </article>

            <?php 

        $count++;

        unset($all_post_cats);

        endwhile;

    endif;

    wp_reset_postdata();

    die;
}
  • This isn't a full working example, specifically in the articles_grid function, the variables $trending, $init, $offset, etc are all not defined. It's hard to help without a full example. – Matt Cromwell Nov 15 '18 at 3:41
  • 1
    Hi Matt, it is a full working example. I actually figured out the issue just a little while ago. thank you though. – Jason Nov 15 '18 at 3:43
1

UPDATE

Turns out the issue was with the first page of posts. I needed to account for page 1 when calling the ajax load more. Since this is a shortcode and not a template my query vars were not passing along to the ajax call. I resolved the issue by passing the page as a data attribute through the ajax call.

  • That makes sense, glad you got it worked out. – Matt Cromwell Nov 15 '18 at 3:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.