0

I'm looking for a way to add ajax "load more" pagination this example I found of a WP_Query loop with a dropdown to filter by taxonomy. The filtering system works great and I am able to add a standard numbered pagination navigation.

I have seen examples of ajax php/js code for custom post type loops, but can't seem to figure out how to apply it to this query. My goal is to have the ajax "load more" button to load as usual. Then if you filter by category/taxonomy, the "load more" will only load those filtered posts.

Here's the source of the example loop: https://evowebdev.com/2017/05/using-a-dropdown-menu-to-filter-a-custom-post-type-with-custom-taxonomy/

<h4>Filter News by Category</h4>
<form id="newslist" action="" method="GET"> <!--build the dynamic form-->
<select id="news" name="newscat" onchange="submit();">
    <option value="" <?php echo ($_GET['newscat'] == '' ) ? ' selected="selected" ' : ''; ?>>Show all news</option> 
    <?php $categories = get_categories('taxonomy=news-category&post_type=news'); 
    foreach ($categories as $category) : 
        echo '<option value="'.$category->name.'"'; 
        echo ($_GET['newscat'] == ''.$category->name.'') ? ' selected="selected"' : ''; 
        echo '>'.$category->name.'</option>'; 
    endforeach; 
    ?> 
</select> 
</form> 

<?php // let the queries begin 
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1; 
if( !isset($_GET['newscat']) || '' == $_GET['newscat']) { // if nothing selected or 'show all' selected 
$newslist = new WP_Query( array( 
    'post_type' => 'news', 
    'posts_per_page' => 8, 
    'orderby' => 'DATE', 
    'paged' => $paged 
) ); 

} else { //if select value exists, the query that compares $_GET value and taxonomy term (name) 
$newscategory = $_GET['newscat']; //get filter value 
$newslist = new WP_Query( array( 
    'post_type' => 'news', 
    'posts_per_page' => 8, 
    'orderby' => 'DATE', 
    'paged' => $paged, 
    'tax_query' => array( //the taxonomy query 
        array( 
        'taxonomy' => 'news-category', 
        'field' => 'name', 
        'terms' => $newscategory 
        ) 
     ) 
)); 
} 

if ($newslist->have_posts()) : while ( $newslist->have_posts() ) : 
$newslist->the_post(); 
?> 

SHOW RESULTS 

<?php endwhile; 
else : 
echo '<p>There are no news items in that category.</p>'; 
endif; 
?>  
<?php wp_pagenavi( array( 'query' => $newslist ) ); ?> 
<?php wp_reset_query(); ?>

And this is what I am currently using for numbered pagination, that works to paginate filtered posts as well. What can I use in its place for ajax "load more"?

    <div class="pagination row text-center">
        <?php 
            echo paginate_links( array(
                'base'         => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),
                'total'        => $newslist->max_num_pages,
                'current'      => max( 1, get_query_var( 'paged' ) ),
                'format'       => '?paged=%#%',
                'show_all'     => false,
                'type'         => 'plain',
                'end_size'     => 2,
                'mid_size'     => 1,
                'prev_next'    => true,
                'prev_text'    => sprintf( '<i></i> %1$s', __( 'Newer Posts', 'text-domain' ) ),
                'next_text'    => sprintf( '%1$s <i></i>', __( 'Older Posts', 'text-domain' ) ),
                'add_args'     => false,
                'add_fragment' => '',
            ) );
        ?>
    </div>

Your Answer

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

Browse other questions tagged or ask your own question.