Using dynamic Categories with Isotope jQuery Filtering WordPress
- SOLVED
I have recently released a premium theme on ThemeForest that utilizes Isotope filtering http://isotope.metafizzy.co/. Here's the link the theme currently for sale, so you can see how it's functioning at the moment. http://themeforest.net/item/collagestudio/180006
Currently, the filter is using a hardcoded set of filters (images, music, video) that identifies a post based on whether or not a music, video, or just an image is used and filters them accordingly. I have had some requests to have the ability to include categories. At first, I thought it wouldn't be a problem. I was wrong. I need some help.
I would like to offer the user the ability to select multiple categories that will show in the filter after they have chosen their categories. I assume that I would have to offer multiple category selection options in the admin, so I began with $cat1, $cat2, etc. I had no problem showing the selection in the filter, but actually filtering the items became a major problem.
Here's the actual code that I've begun, but hit a brick wall on.
<div class="main" id="filter">
<div class="boxy-filter">
<div id="options" class="clearfix">
<div class="block">
<?php if ( $filterTitle = get_option('of_filter_title') ) { ?>
<h3 class="featured"><?php echo stripslashes( $filterTitle ) ?></h3>
<?php } else { ?>
<h3 class="featured" style="margin-bottom:10px;">Filter Posts</h3>
<?php } ?>
<ul class="filters">
<li>
<ul id="filters" class="option-set floated clearfix">
<li class="all"><a href="#filter" data-filter="*" class="selected">All</a></li>
<li class="image"><a href="#filter" data-filter=".image">Image</a></li>
<li class="music"><a href="#filter" data-filter=".music">Music</a></li>
<li class="video"><a href="#filter" data-filter=".video">Video</a></li>
<?php if ( $cat1 = get_option('of_cat1') ) { ?>
<li class="video"><a href="#filter" data-filter=".<?php echo stripslashes( $cat1 ) ?>"><?php echo stripslashes( $cat1 ) ?></a></li>
<?php } else { ?>
<?php } ?>
</ul><!-- end filters -->
</li><!-- end li -->
<li><!-- begin li -->
<ul id="layouts" class="option-set floated clearfix">
<li><a href="#masonry" class="selected">Masonry</a></li>
<li><a href="#fitRows">Rows</a></li>
</ul><!-- end ul -->
</li><!-- end li -->
</ul><!-- end filters -->
</div> <!-- block -->
</div><!-- #options -->
</div><!-- end boxy -->
<div class="clear" style="height:10px;"> </div>
<!-- Begin Container -->
<div id="container" class="variable-sizes clearfix infinite-scrolling">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<!-- Some Important Variables, etc. -->
<?php
$image = vt_resize( $thumb, '', 200, 170, true );
$thumb = get_post_thumbnail_id();
$fullsrc = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large', false, '' );
$videoLink = get_post_meta($post->ID, 'siiimple_video_link', true);
$musicLink = get_post_meta($post->ID, 'siiimple_music_link', true);
$cat1 = get_option('of_cat1');
?>
<!-- Text Only -->
<?php if ((( !$thumb )) && ((!$videoLink) && (!$musicLink))) { ?>
<div class="boxy text">
<h1 class="title noimg"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
<p class="date"><?php the_time('F jS, Y') ?></p>
<?php the_excerpt(''); ?>
</div><!-- end boxy -->
<!-- Image -->
<?php } elseif ((!$videoLink) && (!$musicLink)) { ?>
<div class="boxy image <?php echo stripslashes( $cat1 ) ?>">
<div class="img-inner">
<a rel="prettyPhoto[mixed]" href="<?php echo $fullsrc[0]; ?>" title="<?php the_title(); ?>">
<img src="<?php bloginfo('template_directory'); ?>/_framework/scripts/timthumb.php?src=<?php echo PostThumbURL(); ?>&w=200&h=170&s=1&zc=1" alt="" width="200" height="170"/>
</a>
</div><!-- end img-inner -->
<h1 class="title"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
<p class="date"><?php the_time('F jS, Y') ?></p>
<?php the_excerpt(''); ?>
</div><!-- end boxy image -->
<!-- Video -->
<?php } elseif ($videoLink) { ?>
<div class="boxy video">
<div class="img-inner-video">
<a rel="prettyPhoto[mixed]" href="<?php echo $videoLink; ?>" title="<?php the_title(); ?>">
<img src="<?php bloginfo('template_directory'); ?>/_framework/scripts/timthumb.php?src=<?php echo PostThumbURL(); ?>&w=200&h=170&s=1&zc=1" alt="" width="200" height="170"/>
</a>
</div><!-- end img-inner-video -->
<h1 class="title"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
<p class="date"><?php the_time('F jS, Y') ?></p>
<?php the_excerpt(''); ?>
</div><!-- end boxy -->
<!-- Music -->
<?php } elseif ( $musicLink ) { ?>
<div class="boxy music">
<div class="img-inner-music">
<a rel="prettyPhoto[mixed]" href="<?php echo $musicLink; ?>" title="<?php the_title(); ?>">
<img src="<?php bloginfo('template_directory'); ?>/_framework/scripts/timthumb.php?src=<?php echo PostThumbURL(); ?>&w=200&h=170&s=1&zc=1" alt="" width="200" height="170"/>
</a>
</div><!-- end img-inner-music -->
<h1 class="title"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
<p class="date"><?php the_time('F jS, Y') ?></p>
<?php the_excerpt(''); ?>
</div><!-- end boxy -->
<?php } ?>
<?php endwhile; ?>
</div><!-- end Container -->
<?php endif; ?>
</div><!-- end main -->
If I failed to explain what I'm after, I apologize and I'm happy to try to be more thorough.
Thanks!
Answers (1)
Sébastien | French WordpressDesigner answers:
send me please the folder of the theme, i look at that
maildeseb @ gmail . com