Wordpress e filtraggio con Isotope

Potresti voler utilizzare questa funzione:

Inserisci questo nel tuo functions.php

function isotope_categories() {

        $categories = get_categories();

        $html = '<ul class="filters option-set" data-option-key="filter">';
        $html .= '<li><a href="#filter" data-option-value="*" class="selected">Tutti gli elementi</a></li>';

        foreach ($categories as $category) {

            $html .= "<li><a href='#filter' data-option-value='.category-{$category->category_nicename}'>{$category->cat_name}</a></li>";   
        }

        $html .= '</ul>';

        echo $html;
    }

e poi chiama questa funzione nel file dove si trova il tuo contenitore isotope.

Ad esempio:

<nav class="options">                       
    <?php isotope_categories() ?>
</nav>  

Produrrà il markup corretto per isotope

Quindi se crei nuovi post nel backend di WordPress e associ delle categorie, verranno visualizzati e saranno filtrabili

Anch'io ho cercato di integrare il plugin jQuery Isotope con WordPress quando mi sono imbattuto in questo argomento. Se hai ancora bisogno di aiuto, ecco come ho fatto funzionare il tutto. Il mio metodo era leggermente diverso poiché ho creato un custom post type per i progetti che volevo filtrare per project_categories, una tassonomia personalizzata.

Il template della pagina necessitava del seguente codice PHP per generare la lista #projects-filter e il div #projects.

<?php
$terms = get_terms('project_categories');
$count = count($terms);
if ( $count > 0 ){
echo '<ul id="projects-filter">';
echo '<li><a href="#" data-filter="*">Tutti</a></li>';
foreach ( $terms as $term ) {
    $termname = strtolower($term->name);  
    $termname = str_replace(' ', '-', $termname);  
    echo '<li><a href="#" data-filter="' . '.' . $termname . '">' . $term->name . '</a></li>';
}
echo '</ul>';
}
?>

<?php 
    $loop = new WP_Query(array('post_type' => 'projects', 'posts_per_page' => -1));
    $count =0;
?>

<div id="project-wrapper">
    <div id="projects">

    <?php if ( $loop ) : 

        while ( $loop->have_posts() ) : $loop->the_post(); ?>

            <?php
            $terms = get_the_terms( $post->ID, 'project_categories' );

            if ( $terms && ! is_wp_error( $terms ) ) : 
                $links = array();

                foreach ( $terms as $term ) 
                {
                    $links[] = $term->name;
                }
                $links = str_replace(' ', '-', $links); 
                $tax = join( " ", $links );     
            else :  
                $tax = '';  
            endif;
            ?>

            <?php $infos = get_post_custom_values('wpcf-proj_url'); ?>

            <div class="project-item <?php echo strtolower($tax); ?>">
                <div class="thumb"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail( 'projects-thumb' ); ?></a></div>
                <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
                <p class="excerpt"><a href="<?php the_permalink() ?>"><?php echo get_the_excerpt(); ?></a></p>
                <p class="links"><a href="<?php echo $infos[0]; ?>" target="_blank">Anteprima Live →</a> <a href="<?php the_permalink() ?>">Dettagli →</a></p>
            </div>

        <?php endwhile; else: ?>

        <div class="error-not-found">Spiacenti, al momento non ci sono voci nel portfolio.</div>

    <?php endif; ?>


    </div>

    <div class="clearboth"></div>

</div> <!-- end #project-wrapper-->

Ed ecco il javascript che fa la magia.

jQuery(document).ready(function(){
    var mycontainer = jQuery('#projects');
    mycontainer.isotope({ 
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'liniar',
            queue: false,
        }
    }); 

    jQuery('#projects-filter a').click(function(){ 
        var selector = jQuery(this).attr('data-filter'); 
        mycontainer.isotope({ 
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'liniar',
                queue: false,
            } 
        }); 
      return false; 
    });
});

Per prima cosa, avvolgi l'output del post in un <div> e aggiungi il tag template <?php post_class(); ?> a quel <div>.

Quindi, cambia questo:

<a href="<?php the_permalink() ?>"> <div id="img" class="<?php  $category = get_the_category(); echo $category[0]->cat_name; ?>">
    <?php the_post_thumbnail();?>

    <h1><?php the_title(); ?></h1>
</div></a>

...in questo:

<div <?php post_class(); ?>
    <a href="<?php the_permalink() ?>"> <div id="img">
        <?php the_post_thumbnail();?>

        <h1><?php the_title(); ?></h1>
    </div></a>
</div>

Ora, se leggi la documentazione di post_class() sul Codex (linkata sopra), vedrai che, tra le altre classi, questo tag template applica una classe category-{slug}. (Per le tue categorie di esempio, post_class() aggiungerebbe category-design o category-typo.

Quindi, dovresti solo aver bisogno di puntare a category-{slug} per implementare il filtro isotope.

Aggiungi animationEngnine: 'jquery' - e l'animazione sarà più fluida.

var mycontainer = jQuery('#projects');
mycontainer.isotope({ 
    filter: '*',
    animationEngine: 'jquery',
    animationOptions: {
    duration: 350,
    easing: 'linear',
    queue: true
    }
}); 

jQuery('#projects-filter a').click(function(){ 
    var selector = jQuery(this).attr('data-filter'); 
    mycontainer.isotope({ 
        filter: selector,
        animationOptions: {
            duration: 350,
            easing: 'linear',
            queue: true,
        } 
    }); 
  return false; 
});