Isotope with WordPress Portfolio

Isotope is the best way to make your blog or portfolio filterable, sort option and with a different look. In this article, I will explain how to integrate Isotope with WordPress. You can make your blog posts, portfolio, gallery or your e-commerce products look very professional with few lines of coding.

Let’s make the JetPack Portfolio filterable with a masonry layout.

Isotope with WordPress

1) Go in functions.php and paste the code below.

 if ( is_post_type_archive('jetpack-portfolio') || is_home() || is_front_page()) {
			wp_enqueue_script('isotope', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js#asyncload', array(), '2.2.2', true);
			wp_enqueue_script('imagesloaded', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.min.js', array(), '3.1.8', true);
	}

This will make sure that Isotope and Imagesloaded will be enqueue ONLY in the main portfolio/projects, home page and blog page! Remove the if case if you want in every page. Why do we load imagesloaded? Because most of the times your images will overlap and it will cause your page to look broken.
 

2) Secondly, add this in archive-jetpack-portfolio.php (if you use Jetpack’s Portfolio) to active the filter buttons.

<ul id="filters">
        <?php
            $terms = get_terms("jetpack-portfolio-type"); //change to a different POST TYPE (Jetpack Portfolio Project/Category Type)
            $count = count($terms);
                echo '<li><a href="javascript:void(0)" title="All" data-filter=".all" class="active">All</a></li>'; //default "All"
            if ( $count > 0 ){
 
                foreach ( $terms as $term ) {
 
                    $termname = strtolower($term->name);
                    $termname = str_replace(' ', '-', $termname);
                    echo '<li><a href="javascript:void(0)" data-filter=".'.$termname.'">'.$term->name.'</a></li>'; //show our custom post type categories
                }
            }
        ?>
    </ul>
<!-- Let's list our Portfolio Projects-->
<div id="portfolio">
 
    <?php 
       $args = array( 'post_type' => 'jetpack-portfolio', 'posts_per_page' => -1 ); //list all projects from Jetpack Portfolio
       $loop = new WP_Query( $args );
         while ( $loop->have_posts() ) : $loop->the_post(); 
 
       $terms = get_the_terms( $post->ID, 'jetpack-portfolio-type' );	//get our portfolio categories to a single project					
            if ( $terms && ! is_wp_error( $terms ) ) : 
 
                $links = array();
 
                foreach ( $terms as $term ) {
                    $links[] = $term->name;
                }
 
                $tax_links = join( " ", str_replace(' ', '-', $links));          
                $tax = strtolower($tax_links);
            else :	
	        $tax = '';					
            endif; 
 
//Style our single project
    		echo '<div class="all portfolio-item '. $tax .'">'; //Important! Without the correct tax your filters won't work! This MUST be your Project CATEGORY!
    		echo '<article id="post-'.get_the_ID().'">';
        if ( has_post_thumbnail() ) { 
  the_post_thumbnail();
}
  echo '<div class="mask">
        <h2><a href=" '.get_the_permalink().'">'.get_the_title().'</a></h2>
        <p class="category">'.get_the_term_list($post->ID, 'jetpack-portfolio-type', '', ' / ', '').'
        </p>
        <span class="date">'.get_the_modified_date().'</span></p>
        </div>';
        echo '</article>';
     echo '</div>';
      endwhile; ?>
 
   </div><!-- #portfolio -->

3) Final step, open your JS theme file (e.g. jquery.theme.js) and add this:

jQuery(function ($) {
 
        // Init ISOTOPE
    var $container = $('#portfolio');
    //some settings
    $container.imagesLoaded(function(){
        $container.isotope({
            itemSelector: '.portfolio-item',
            layoutMode: 'masonry',
            masonry: {
                gutter: 15
            }
        });
    });
    // filter items when filter link is clicked
    $('#filters a').click(function() {
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector
        });
    });
});

That’s it! Open your projects page and check what have you done. You can play with it and change the layout mode to something else. Remember to read Isotope‘s documentation carefully!

What do you think? Is Isotope a good solution for filters, sorting or layouts?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.