Come fare un filtro Ajax dei post con categorie e checkbox

Il codice (commentato) che ho realizzato và nel file category.php, inseritelo dove volete che appiano le checkbox:

<?php

//Con questo otteniamo solamente l'elenco delle sottocategorie della categoria che stiamo vedendo
//$now=get_terms( 'category', 'child_of='.get_query_var('cat').'&fields=ids&depth=3');
//Con questo invece otteniamo l'elenco di tutte le categorie
$now=get_terms( 'category', 'fields=ids&depth=3');
//Naturalmente potete personalizzare il filtro che genera l'elenco delle categorie come volete

function checkbox_categories($args){
//Dalle categorie ottenute otteniamo le altre informazioni
$categories = get_categories( $args );
//Creiamo la lista delle checkbox
$select = '<ul id="catSearchFilters">';
foreach ($categories as $category) {
$select .= '<li><input type="checkbox" name="filterCat[]" value="'.$category->cat_ID.'">';
$select .= '<span>'.$category->cat_name.'</span></li>';
}
$select .= '</ul>';
//Stampiamo le checkbox
echo($select);
//Stampiamo il codice jQuery
echo "<script>
jQuery(function() {
jQuery(\"input[name='filterCat[]']\").change(function() {
checked = [];
//Otteniamo un elenco delle checkbox in un array
        jQuery(\"input[name='filterCat[]']:checked\").each(function ()	{
				checked.push(parseInt(jQuery(this).val()));
		});
	loadPostsFromCat(checked);
});
function loadPostsFromCat(category)  {
//svuotiamo lelenco delle categorie
    jQuery(\"#the-posts\").children().remove();
//mostriamo il loader di wordpress
	jQuery('.loaderwp').show();
    jQuery.ajax({
      type: 'POST',
      url: 'http://www.dominio.com/wp-admin/admin-ajax.php',
      data: {
        'action': 'my_get_posts',
        'cat': category
      },
      success: function(data, textStatus, XMLHttpRequest)      {
          // aggiungiamo loutput allelenco
          jQuery(\"#the-posts\").append(data);

      },
      complete: function(XMLHttpRequest, textStatus)      {
//nascondiamo il loader
        jQuery('.loaderwp').hide();
      }
    });

  }
});
</script>";
}
//mostriamo le checkbox
checkbox_categories(array('include'=>implode(',',$now)));

?>

Il codice per mostrare il loader da piazzare dove preferite:

<img src="http://www.dominio.com/wp-includes/images/wpspin-2x.gif" style="display:none;" class="loaderwp">

Per mostrare la lista consiglio di mettere questo codice prima del loop, così viene svuotato al caricamento dajQuery:

<div id="the-posts">
<!-- Loop -->
</div>

Il codice (sempre commentato) che và in functions.php:

function my_get_posts()  {
    //otteniamo lelenco delle categorie
    if(is_array($_POST['cat'])){
		$cat_id = implode(',',$_POST['cat']);
	} else {
		$cat_id = $_POST['cat'];
	}

    //otteniamo lelenco dei post, potete personalizzare queto filtro come volete
    $args = array(
      'post_type' => 'post',
      'post_status' => 'publish',
      'order'=> 'ASC',
      'orderby' => 'date',
      'category' => $cat_id
    );
//global ci serve per poter sfruttare setup_postdata
	global $post;
    $posts =  get_posts($args);

    foreach ($posts as $post)   {
		setup_postdata($post);
//con questo sfruttiamo il codice del file content 
		get_template_part( 'content', get_post_format() ); 
    }
    exit;
  }

  // aggiungiamo la funzione agli hook per ajax

  // per gli utenti loggati
  add_action('wp_ajax_my_get_posts', 'my_get_posts');
  // per gli altri
  add_action('wp_ajax_nopriv_my_get_posts', 'my_get_posts');

Il codice mi sembra molto semplice da capire ma se non è chiaro commentate e vedrò di migliorarlo 🙂

Ci vediamo al codemotion domani!