0

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');

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.