Ajax Filter Chapters

ajax.php

<?php

// ----
// Ajax posts filter by category
// Reference: http://www.bobz.co/ajax-filter-posts-tag/
// ----

// Function to load get_template_part into a variable to abstract markup from response
// Credit: http://wordpress.stackexchange.com/questions/171979/loading-page-content-into-a-variable-in-template
function ifp_return_get_template_part( $slug, $name=null ) {

  ob_start();
  get_template_part($slug, $name);
  $content = ob_get_contents();
  ob_end_clean();

  return $content;
}

// Enqueue the Ajax scripts
function ifp_ajax_filter_posts_scripts() {

  // Enqueue scripts
  wp_register_script('afp_script', get_stylesheet_directory_uri() . '/assets/js/ajax-request.js', false, null, false);
  wp_enqueue_script('afp_script');

  // Make certain data available in the Ajax response, such as the admin-ajax.php file which WordPress uses to process the request
  wp_localize_script( 'afp_script', 'afp_vars', array(
        'afp_nonce' => wp_create_nonce( 'afp_nonce' ),
        'afp_ajax_url' => admin_url( 'admin-ajax.php' ),
      )
  );
}
add_action('wp_enqueue_scripts', 'ifp_ajax_filter_posts_scripts', 100);


// Script for getting posts
function ifp_ajax_filter_get_posts( $cat ) {

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

  // Send the data about the category name to the client. This must match the corresponding value in the data array in ajax-request.js.
  $cat = $_POST['cat'];

  // This is our query:
  $args = array(
    'post_type' => 'team',
    'category_name'  => $cat,
  );

  // Prepare for multiple JSON objects with an array
  $result = array();

  // Create a new query based on our arguments above
  $query = new WP_Query( $args );

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

  // Start the loop
  if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post();

    // Add each rendered post's template part to an array (response is an array w/in $result)
    $result['response'][] = ifp_return_get_template_part('template-parts/post/content', 'team');
    $result['status']     = 'success';

  endwhile; else:

    // The response data if there are no posts
    $result['response'] = '<h2>No posts found</h2>';
    $result['status']   = '404';

  endif;

  // Turn the response array into JSON so that we can use it in JavaScript
  $result = json_encode($result);

  // Echo (vs return) the result so that it is actually outputted as data
  echo $result;

  die();
}

// Hook all of the actions into WordPress
add_action('wp_ajax_filter_posts', 'ifp_ajax_filter_get_posts');
add_action('wp_ajax_nopriv_filter_posts', 'ifp_ajax_filter_get_posts');