WordPress y filtrado con Isotope

Puedes usar esta función:

Coloca esto en tu 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">Todos los elementos</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;
    }

y luego llama esta función en el archivo donde está tu contenedor de isotope.

Por ejemplo:

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

Generará el marcado correcto para isotope

Así que si creas nuevas publicaciones en el backend de WordPress y les asignas categorías, aparecerán y serán filtrables

Yo también he estado intentando integrar el plugin jQuery Isotope con WordPress cuando me encontré con este tema. Si todavía necesitas ayuda, aquí está cómo funcionó. Mi método fue un poco diferente ya que he creado un tipo de entrada personalizado de proyectos que quería filtrar por project_categories, que es una taxonomía personalizada.

La plantilla de página necesitaba el siguiente código PHP para generar la lista #projects-filter y el 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="*">Todos</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">Vista previa →</a> <a href="<?php the_permalink() ?>">Más detalles →</a></p>
            </div>

        <?php endwhile; else: ?>

        <div class="error-not-found">Lo sentimos, no hay entradas de portafolio por ahora.</div>

    <?php endif; ?>


    </div>

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

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

Y aquí está el javascript que hace 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; 
    });
});

Primero, envuelve la salida de tu publicación en un <div> y añade la etiqueta de plantilla <?php post_class(); ?> a ese <div>.

Así que cambia esto:

<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>

...por esto:

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

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

Ahora, si lees la entrada del Codex sobre post_class() (enlazada arriba), verás que, entre otras clases, esta etiqueta de plantilla aplica una clase category-{slug}. (Para tus categorías de ejemplo, post_class() añadiría category-design o category-typo).

Por lo tanto, solo necesitarás apuntar a category-{slug} para implementar el filtro de isotope.

Añade animationEngnine: 'jquery' - y la animación será más suave.

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