If you’ve taken a look at the portfolio section of this site, you’ll notice I am using the Isotope jQuery plugin created by David DeSandro. I’ve been using this for a new section of the Parsons website that should be going live soon and figured it would work great for my site.
My main concern was not wanting to have to mess with the front end every time I want to update, so I started thinking how I could use WordPress to power Isotope. It turned out to be a lot easier than I had anticipated.
I created a category called “Portfolio” with several child categories (Design, Development, Photography). These child categories are pulled into the the portfolio page and the filter menu is built with the following code:
<ul id="filters" class="option-set filter" data-option-key="filter">
<li>Filter: </li>
<?php $categories = get_categories('orderby=name&depth=1&title_li=&use_desc_for_title=1&parent=82'); foreach ($categories as $cat) { ?>
<li><a href="#"<?php if ($cat->slug == 'photos') {?> class="show-subnav filter-item" <?php } else {?>class="close-subnav filter-item" <?php }?>id="<?php echo $cat->slug; ?>" data-option-value=".<?php echo $cat->slug; ?>"><?= $cat->cat_name; ?></a></li>
<?php } ?>
<li><a href="#" data-option-value="*" id="showall" class="selected close-subnav filter-item">show all</a></li>
</ul>
So after the menu is generated, then the portfolio items need to added. This was a simple matter of creating posts, assigned to the child categories of “Portfolio”, using the built-it WordPress Featured Image for the thumbnails and a custom field for the link to the full size image. The titles of the items (captions for the fancybox) are pulled from the post content. If you are familiar with Isotope, you know that the filtering is mainly based on classes assigned to the items to be filtered. So I generate the items on the page with the following code, using the post categories to generate the necessary classes so Isotope can work its magic:
<div class="port port-file <?php $post_cats = get_the_category(); foreach( $post_cats as $category ) { echo $category->slug.' ';} ?>" data-category="portfolio">
<a class="portfolio-img port-item-link showall <?php $post_cats = get_the_category(); foreach( $post_cats as $category ) { echo $category->slug.' ';} ?>" rel="portfolio" title="<?php the_content(); ?>" id="<?php echo get_post_meta($post->ID, 'trigger_id', true); ?>" href="<?php echo get_post_meta($post->ID, 'port_lg', true); ?>">
<?php the_post_thumbnail(); ?></a>
</div>
And that’s pretty much it. Not all that complicated. If you happen upon this post and have any trouble implementing this yourself, feel free to leave a comment with any questions.
