Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

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;">&nbsp;</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(); ?>&amp;w=200&amp;h=170&amp;s=1&amp;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(); ?>&amp;w=200&amp;h=170&amp;s=1&amp;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(); ?>&amp;w=200&amp;h=170&amp;s=1&amp;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)

2011-03-31

S├ębastien | French WordpressDesigner answers:

send me please the folder of the theme, i look at that
maildeseb @ gmail . com