Filter custom post with taxonomy - Add ALL button

Viewed 173

I am setting up a custom post with a front-office display filter via taxonomy. After several hours of research and tests, I finally managed to get what I want but I still have 2 little things on which I am stuck... I would have liked to add an ALL button to re-display all my archives if we clicked on another filter before. I also can’t add a class to my filter button when it is activated... Do you have a lead to refer me please? Below what I did:

archive-work.php

<div id="work-filter" class="col-md-12">
<?php get_work_filters(); ?>
</div>
<div class="work-results animated fadeIn">
<?php $res = my_get_posts();
echo $res['response']; ?>
</div>

functions.php

/***************** filter work ****************/
function ajax_filter_posts_scripts() {
  // Enqueue script
  wp_register_script('afp_script', get_template_directory_uri() . 
      '/assets/js/work.js', false, null, false);
  wp_enqueue_script('afp_script');

  wp_localize_script( 'afp_script', 'afp_vars', array(
        'afp_nonce' => wp_create_nonce( 'afp_nonce' ), // Create nonce which we later will use to verify AJAX request
        'afp_ajax_url' => admin_url( 'admin-ajax.php' ),
      )
  );
}
add_action('wp_enqueue_scripts', 'ajax_filter_posts_scripts', 100);

$result = array();

// Script for getting posts
function ajax_filter_get_posts( $work_item ) {

      // Verify nonce
      if( !isset( $_POST['afp_nonce'] ) || 
          !wp_verify_nonce( $_POST['afp_nonce'], 'afp_nonce' ))
        die('Permission denied');

         $work_item = $_POST['expertises'];
         $result = json_encode(my_get_posts($work_item, true));
         echo $result;

         die();

    }

function my_get_posts($work_item = '', $ajax = false){

    // WP Query
      $args = array(
        'expertises' => $work_item,
        'post_type' => 'work',
        'posts_per_page' => -1,
      );

      // If taxonomy is not set, remove key from array and get all posts
      if( !$work_item ) {
        unset( $args['expertises'] );
      }
      

      $query = new WP_Query( $args );
      $html = '';
      $items = array();

      if ( $query->have_posts() ) : 
           while ( $query->have_posts() ) : 
           $query->the_post(); 

           $res = '<div class="works">'.
                      '<a href="'.get_permalink().'">'.
                          '<article class="panel panel-default" id="post-'.get_the_id().'">'.
                              '<div class="panel-body">'.
                                  '<div class="panel-cover">'.
                                      '<h3>'.get_the_title().'</h3>'.
                                          get_the_excerpt().
                                  '</div>'.
                                  '<div class="imgworkarch">'.
                                        get_the_post_thumbnail( $post = null, $size = 'archivework' ).
                                  '</div>'.
                              '</div>'.      
                          '</article>'.
                      '</a>' .     
                  '</div>';


           $ajax ? $items[] = $res : $html .= $res;


       endwhile;

       $result['response'] = $ajax ? $items : $html;
       $result['status'] = 'success';

       else:
           $result['response'] = '<h2>No posts found</h2>';
           $result['status']   = '404';
       endif;
wp_reset_postdata();
return $result;
}

add_action('wp_ajax_filter_posts', 'ajax_filter_get_posts');
add_action('wp_ajax_nopriv_filter_posts', 'ajax_filter_get_posts');

//Get Work Filters
function get_work_filters()
{
    $work_items = get_terms('expertises');
    $filters_html = false;
    $count = count( $work_items );

    if( $count > 0 ):
        foreach( $work_items as $work_item )
        {
            $work_item_id = $work_item->term_id;
            $work_item_name = $work_item->name;

            $filters_html .= '<a href="' . 
                get_term_link( $work_item ) . 
                '" class="btn work-filter" title="' . 
                $work_item->slug . '">' . $work_item->name . '</a> ';
        }
        echo $filters_html;
    endif;
}

work.js

$(document).ready(function(){

    // work filters
    $('.work-filter').click( function(event) {
        // Prevent default action - opening tag page
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }

        // Get tag slug from title attirbute
        var expertises = $(this).attr('title');        

        data = {
            action: 'filter_posts', // function to execute
            afp_nonce: afp_vars.afp_nonce, // wp_nonce
            post_type: "work", // selected tag
            expertises: expertises,
            };

        $.ajax({ 
            type: "post",
            dataType: "json",
            url: afp_vars.afp_ajax_url, 
            data: data, 
            success: function(data, textStatus, XMLHttpRequest) {
                console.log(data);
                // Restore div visibility
                $('.work-results').fadeOut()
                    .queue(function(n) {
                            $(this).html(data.response);
                            n();
                }).fadeIn();
            },
            error: function( XMLHttpRequest, textStatus, errorThrown ) {
                /*console.log( MLHttpRequest );
                console.log( textStatus );
                console.log( errorThrown );*/
                $('.work-results').fadeOut()
                    .queue(function(n) {
                            $(this).html("No items found. ");
                            n();
                }).fadeIn();
            }
        });
    });

});
1 Answers

Maybe it's too late to answer this, but I hope it helps someone.

You just have to add another button into your work-filter block with a different title like 'reset', then remove the taxonomy filter on the query in your my_get_posts when the value matches the title. Here is the code:

function my_get_posts($taxonomy = '', $ajax = false)
{
    if($taxonomy != 'reset'){
        $args = array(
            'service' => $taxonomy,
            'post_type' => 'projects',
            'posts_per_page' => -1,
        );
    }else{
        $args = array(
            'post_type' => 'projects',
            'posts_per_page' => -1,
        );
    }
    if (!$taxonomy) {
        unset($args['service']);
    }

    $query = new WP_Query($args);
    $html = '';
    $items = array();

    if ($query->have_posts()) :
        while ($query->have_posts()) :
            $query->the_post();

            $res = '<div class="col-lg-4">' .
                '<a href="' . get_permalink() . '">' .
                '<article class="panel panel-default" id="post-' . get_the_id() . '">' .
                '<div class="panel-body">' .
                get_the_post_thumbnail() .
                '<div class="panel-cover">' .
                '<h3>' . get_the_title() . '</h3>' .
                get_the_content() .
                '</div>' .
                '</div>' .
                '</article>' .
                '</a>' .
                '</div>';


            $ajax ? $items[] = $res : $html .= $res;

        endwhile;
        $result['response'] = $ajax ? $items : $html;
        $result['status'] = 'success';
    else :
        $result['response'] = '<h2>No posts found</h2>';
        $result['status']   = '404';
    endif;
    wp_reset_postdata();
    return $result;
}
function reset_all(){
    echo '<a href="#" class="btn work-filter" title="reset">All</a> ';
}
Related