Isotope + Wordpress

            <div class="thirteen columns">

                <div id="options" class="clearfix">

                    <?php
                        // Get Portfolio Catagories
                        $cats = get_terms('project_field');
                        // Show filter if catagories exist
                        if($cats[1] !=' ') {
                    ?>

                    <!-- Portfolio Filter -->

                    <ul id="filters" class="option-set clearfix" data-option-key="filter">
                        <li><a href="#filter" data-option-value="*" class="selected">All</a></li>
                        <?php foreach($cats as $cat): ?>
                        <li><a href="#filter" data-option-value=".<?php echo $cat->slug; ?>" class="selected"><?php echo $cat->name; ?></a></li>
                        <?php endforeach; ?>
                    </ul>

                    <!-- Portfolio Filter Ends -->

                    <?php } ?>

                </div>

                <div id="container" class="clearfix">

                    <?php
                        // Get Post Type ==> portfolio
                        query_posts(array(
                            'post_type' => 'portfolio',
                            'posts_per_page' => -1
                            ));

                        while(have_posts()): the_post();

                        $terms= get_the_terms(get_the_id(), 'project_field');
                    ?>

                    <div class=".element <?php if($terms) { foreach ($terms as $term) { echo $term->slug . ' ';}}?>" data-catagory="<?php if($terms) { foreach ($terms as $term) { echo $term->slug . ' ';}}?>">
                        <img src="<?php the_field('project_cover'); ?>">
                    </div>

                    <?php endwhile; ?>

                </div>

                <script type='text/javascript' src='http://localhost/wp-content/themes/idea/js/jquery.isotope.min.js?ver=3.7'></script>
                <script type='text/javascript' src='http://localhost/wp-content/themes/idea/js/jquery-1.10.2.js?ver=3.7'></script>
                <script>
                    var $j = jQuery.noConflict();

                    $j(document).ready(function() {

                        $(function(){

                          var $container = $('#container');

                          $container.isotope({
                            itemSelector : '.element',
                            layoutMode: 'fitRows',
                            animationEngine: 'best-available'
                          });


                          var $optionSets = $('#options .option-set'),
                              $optionLinks = $optionSets.find('a');

                          $optionLinks.click(function(){
                            var $this = $(this);
                            // don't proceed if already selected
                            if ( $this.hasClass('selected') ) {
                              return false;
                            }
                            var $optionSet = $this.parents('.option-set');
                            $optionSet.find('.selected').removeClass('selected');
                            $this.addClass('selected');

                            // make option object dynamically, i.e. { filter: '.my-filter-class' }
                            var options = {},
                                key = $optionSet.attr('data-option-key'),
                                value = $this.attr('data-option-value');
                            // parse 'false' as false boolean
                            value = value === 'false' ? false : value;
                            options[ key ] = value;
                            if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
                              // changes in layout modes need extra logic
                              changeLayoutMode( $this, options )
                            } else {
                              // otherwise, apply new options
                              $container.isotope( options );
                            }

                            return false;
                          });


                        });
                    }
                  </script>

            </div>