Ajax load more posts with Ajax taxonomy filter

I’m trying to create taxonomy filter with Ajax load more posts, everything is working except the first page on my template!

I have a custom template page for taxonomy downloads as below the load more button not working on this page until i starting to filter and then the load more button back to work!

So, how can I make the load more button work before i starting using the filter?

As shown below inside the template page I get the downloads taxonomy from my category using tax_query array, So the load more button didn’t see the other posts in this page!

I’m highly appreciated your help.

Template page.

<?php
/**
* Template Name: Downloads Filter Full Width
*/

get_header(); ?>

<div id=”primary” class=”content-area”>
<main id=”main” class=”site-main” role=”main”>

<div class=”filter-content-area” style=”position: relative;”>
<div id=”primary-filter”>

<form action=”<?php echo site_url() ?>/wp-admin/admin-ajax.php” method=”POST” id=”misha_download_filters”>

<?php wp_dropdown_categories( [‘taxonomy’ => ‘category’, ‘name’=>’categoryfilter4’, ‘show_option_none’ => ‘Select…’,’hierarchical’ => 1, ‘child_of’ => 233, ‘show_count’ => 1] ); ?>

<!— <button>Apply filter</button> —>
<input type=”hidden” name=”action” value=”mydownloadsfilter”>

</form>
</div>
</div>
<?php

$args = array(
‘order’ => ‘DESC’,
‘post_type’ => ‘post’,
‘post_status’ => ‘publish’,
‘posts_per_page’ => 20,
‘tax_query’ => array(
array(
‘taxonomy’ => ‘category’,
‘field’ => ‘slug’,
‘terms’ => array(‘downloads’)
),
)
);

query_posts( $args );

global $wp_query;

if ( have_posts() ) : ?>
<div id=”responsess”>
<?php

$archive_content_layout = get_option( ‘archive_content_layout’, ‘th-grid-2’ );
echo ‘<div class=”posts-wrap ‘ . esc_attr( $archive_content_layout ) . ‘”>’;

while ( have_posts() ) : the_post();

get_template_part( ‘template-parts/content’, get_post_format() );

endwhile;

echo ‘</div><!– .posts-wrap –>’;

wp_reset_postdata();
?>
</div>
<?php
global $wp_query;

if ( $wp_query->max_num_pages > 1 ) :
echo ‘<div id=”misha_downloads_loadmore”>More posts</div>’;
endif;

else :

get_template_part( ‘template-parts/content’, ‘none’ );

endif; ?>

</main><!– #main –>
</div><!– #primary –>

<?php
get_sidebar();
get_footer();

wp enqueue scripts.

function misha_my_load_more_downloads_scripts() {

global $wp_query;

wp_register_script( ‘misha_downloads_filter_scripts’, get_stylesheet_directory_uri().’/custom-js/myloadmoredownloads.js’, array(‘jquery’), ‘1.0.0’, true );
wp_enqueue_script( ‘misha_downloads_filter_scripts’ );

// now the most interesting part
// we have to pass parameters to myloadmore.js script but we can get the parameters values only in PHP
// you can define variables directly in your HTML but I decided that the most proper way is wp_localize_script()
wp_localize_script( ‘misha_downloads_filter_scripts’, ‘misha_loadmore_downloads_params’, array(
‘ajaxurl’ => site_url() . ‘/wp-admin/admin-ajax.php’, // WordPress AJAX
‘posts’ => json_encode( $wp_query->query_vars ), // everything about your loop is here
‘current_page’ => $wp_query->query_vars[‘paged’] ? $wp_query->query_vars[‘paged’] : 1,
‘max_page’ => $wp_query->max_num_pages
) );
}

add_action( ‘wp_enqueue_scripts’, ‘misha_my_load_more_downloads_scripts’, 1 );

Loadmore downloads ajax handler.

add_action(‘wp_ajax_loadmoredownloadsbutton’, ‘misha_loadmore_downloads_ajax_handler’);
add_action(‘wp_ajax_nopriv_loadmoredownloadsbutton’, ‘misha_loadmore_downloads_ajax_handler’);

function misha_loadmore_downloads_ajax_handler(){

$args = json_decode( stripslashes( $_POST[‘query’] ), true );
$args[‘paged’] = $_POST[‘page’] + 1;
$args[‘post_status’] = ‘publish’;

query_posts( $args );

global $wp_query;

if( have_posts() ) :

$archive_content_layout = get_option( ‘archive_content_layout’, ‘th-grid-2’ );
echo ‘<div class=”posts-wrap ‘ . esc_attr( $archive_content_layout ) . ‘”>’;

while( have_posts() ): the_post();

get_template_part( ‘template-parts/content’, get_post_format() );

endwhile;

echo ‘</div><!– .posts-wrap –>’;

else :
get_template_part( ‘template-parts/content’, ‘none’ );
endif;

die;
}

Downloads filter function.

function misha_downloads_filter_function(){

$args = array(
‘orderby’ => ‘date’, // we will sort posts by date
‘order’ => $_POST[‘date’],
‘posts_per_page’ => 20
);

if( isset( $_POST[‘categoryfilter4’] ) )
$args[‘tax_query’] = array(
array(
‘hide_empty’ => 0,
‘taxonomy’ => ‘category’,
‘field’ => ‘id’,
‘terms’ => $_POST[‘categoryfilter4’],
)
);

query_posts( $args );

global $wp_query;

if( have_posts() ) :

ob_start();

$archive_content_layout = get_option( ‘archive_content_layout’, ‘th-grid-2’ );
echo ‘<div class=”posts-wrap ‘ . esc_attr( $archive_content_layout ) . ‘”>’;

while( have_posts() ): the_post();

get_template_part( ‘template-parts/content’, get_post_format() );

endwhile;

echo ‘</div><!– .posts-wrap –>’;

wp_reset_postdata();

$content = ob_get_contents(); // we pass the posts to variable
ob_end_clean(); // clear the buffer

else :
ob_start(); // start the buffer to capture the output of the template
get_template_part( ‘template-parts/content’, ‘none’ );
$content = ob_get_contents(); // pass the output to variable
ob_end_clean();

endif;

echo json_encode( array(
‘posts’ => json_encode( $wp_query->query_vars ),
‘max_page’ => $wp_query->max_num_pages,
‘found_posts’ => $wp_query->found_posts,
‘content’ => $content
) );

die();
}
add_action(‘wp_ajax_mydownloadsfilter’, ‘misha_downloads_filter_function’);
add_action(‘wp_ajax_nopriv_mydownloadsfilter’, ‘misha_downloads_filter_function’);

Read more here:: Ajax load more posts with Ajax taxonomy filter

Leave a Reply

Your email address will not be published. Required fields are marked *