How to Add Filters to your WordPress Portfolio

We’ve already showed you how to create a portfolio site on WordPress using a custom post type, a new “projects” query, and a few new templates.

In this post, we’ll show you how to add filters to your portfolio page using the Isotope.js library.

If you haven’t already, go into your WordPress site, create a few categories, and assign them to the items in your portfolio. If you read the first article, we are using a CPT called ‘Projects’ again, so for each project added to the WordPress site, we will need to make sure that a category gets assigned. On the site, the projects are going to be categorized as either “New Construction” or “Renovations.”

Once you have assigned a category to each of your projects, it is time to add the JavaScript that will do the fancy filtering work for you.

Isotope.js is a layout library developed by David DeSandro. It is free for open source and personal use, however, for commercial use, you must purchase a license. Please review the license page for more information and pricing.

So, let’s add the isotope.js file to your site. Ideally, you would add this to a directory called /js/ in your child theme to ensure that updates never delete it.

You also need to create one more file and add it to your /js/ directory. This file will contain the jQuery needed to target your projects. In this example, we named this file projects.js.

Paste the following code into that file and save it. The key things to note in this file are the #projects, .project-item, and #filters. This is the file where you could also change layoutMode: to masonry, packery, cellsByColumn, and more. In this tutorial, we’re using the grid mode.

jQuery(function ($) {

// initialize Isotope after all images have loaded

var $container = $('#projects').imagesLoaded( function() { //The ID for the list with all the blog posts

$container.isotope({ //Isotope options, 'item' matches the class in the PHP

itemSelector : '.project-item',

grid: {

columnWidth: 200

}

});

});

 
//Add the class selected to the item that is clicked, and remove from the others

var $optionSets = $('#filters'),

$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('#filters');

$optionSets.find('.selected').removeClass('selected');

$this.addClass('selected');
//When an item is clicked, sort the items.

var selector = $(this).attr('data-filter');

$container.isotope({ filter: selector });
return false;

});

});

Once you have added this code to your site, it is time to enqueue the files. If your child theme’s functions.php already has a function declared to do this, you will just need to add a line of code to it like the one below.

wp_enqueue_script('isotope', get_stylesheet_directory_uri() . '/js/isotope.pkgd.min.js', array(), '1.0.0', true );

wp_enqueue_script('projects', get_stylesheet_directory_uri() . '/js/projects.js', array(), '1.0.0', true );

Note, get_stylesheet_directory_uri() always refers to the current active theme.
In the case of a custom theme, or the scenario where you are altering a theme without a child theme, you would likely use get_template_directory_uri() in place of get_stylesheet_directory_uri()
If your child theme doesn’t already have a function for enqueuing your script, you will need to add one. Use the following to enqueue your isotope.js file.

add_action( 'wp_enqueue_scripts', 'child_scripts');

function child_scripts(){

wp_enqueue_script('isotope', get_stylesheet_directory_uri() . '/js/isotope.pkgd.min.js', array(), '1.0.0', true );

wp_enqueue_script('projects', get_stylesheet_directory_uri() . '/js/projects.js', array(), '1.0.0', true );

}

One last note here, you should make sure that your theme has already enqueued jQuery. If it hasn’t, you will need to add wp_enqueue_script('jquery'); but as of WordPress 3.8, jQuery is packaged with the WordPress core in /wp-includes/js/jquery/jquery.js.

Finally, save your functions.php file.

Now, go back to your projects-page.php file and add the code that will display your filters, as well as get the number of categories and the category name of each project.

Paste the following code in just above where your portfolio starts. Like the last tutorial, we are using Bootstrap and in the HTML below, we are setting the filter row to be full width of the container. By default, the filters will align to the left of the column. If you aren’t using Bootstrap, you may want to start and end with the <ul> tags.

<div id="filter-row" class="row">
<div id="project-page" class="col-lg-12">
		<ul class="nav navbar-nav navbar-left" id="filters">
			<?php
				$terms2 = get_terms("project_categories"); // This will go get all the categories
				$count = count($terms2); //This counts the number of categories
				echo '<li><a href="javascript:void(0)" title="" data-filter=".all" class="active">Show All</a></li>';
				if ( $count > 0 ){
				foreach ( $terms2 as $term ) {
												$termname = strtolower($term->name);								$termname = str_replace(' ', '-', $termname);
	echo '<li style="list-style:inline;"><a href="javascript:void(0)" title="" class="" data-filter=".'.$termname.'">'.$term->name.'</a></li>';
	}
}
// in the above foreach loop, the code will return all the values stored in $terms2 array.

 ?>
		</ul>
	</div>
</div>

The next step is to get the category for each project and place it into the project container as a class.

<?php
/*
Get the category for each unique post using the post ID
*/
$terms = get_the_terms( $post->ID, 'project_categories' );
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;

	$terms = get_the_terms( $post->ID, 'project_categories' );
?>

<?php echo '<div class="project col-sm-6 col-md-4 all project-item '. $tax .'">';?>

In the code above, all, project-item, and $tax get added to each project container. $tax will be the category that you assigned to it in the wp-admin. Adding “all” allows you to reset the portfolio page any time a user clicks the “all” filter.

In the end, each project should have a class called “all” and in this case, each project will also have either “new-construction” or “renovations.”  Now, when a user clicks on one of the categories, the page will elegantly reformat to display only the category that has been selected, all while maintaining the portfolio’s grid layout.

In conclusion, Isotope.js is a very powerful jQuery plugin that can be implemented on any WordPress site. Once installed, it can be used to sort and filter catalogue, gallery, or portfolio layouts. In addition, there are multiple layout options that you can use. Check out all the options here.

In the end, here is what the projects-page.php looks like when finished:

<?php
/* This is my Projects Portfolio page */

get_header(); 

?>
<div id="content-full-width" class="page-wrap">
    <div class="container content-wrapper">
        <div class="row">
            <div id="content-projects" class="page-wrap2">
	    <div class="container content-wrapper">
	<!-- ============ CONTENT START ============ -->
	        <section id="project-content">
		<div id="intro" class="row">
		    <div class="col-sm-12 text-center">
			<?php while ( have_posts() ) : the_post(); ?>
			<?php the_content() ?>
			<?php endwhile; // end of the loop. ?>
		    </div>
		</div>
	            <div id="filters-row" class="row">
		    <div id="project-page" class="col-lg-12">
		        <ul class="nav navbar-nav navbar-left" id="filters">
			<?php
			$terms2 = get_terms("project_categories");
			$count = count($terms2);
			echo '<li><a href="javascript:void(0)" title="" data-filter=".all" class="active">All</a></li>';
			if ( $count > 0 ){
			    foreach ( $terms2 as $term ) {									    $termname = strtolower($term->name);
			    $termname = str_replace(' ', '-', $termname);
			echo '<li style="list-style:inline;"><a href="javascript:void(0)" title="" class="" data-filter=".'.$termname.'">'.$term->name.'</a></li>';
			}
		} ?>
		    </ul>
		</div>
	        </div>
	    <div id="projects" class="row">
	<!-- Start projects Loop -->
		<?php  /* Query the post   */
	$args = array( 'post_type' => 'projects', 'posts_per_page' => -1, 'orderby'=>'menu_order','order'=>'ASC' );
	$loop = new WP_Query( $args );
	while ( $loop->have_posts() ) : $loop->the_post();
/* Pull category for each unique post using the ID */
	$terms = get_the_terms( $post->ID, 'project_categories' );
	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;
	<?php echo '<div class="project col-sm-6 col-md-4 all project-item '. $tax .'">';?>
            <a href="<?php print get_permalink($post->ID) ?>">
              <?php echo the_post_thumbnail(); ?></a>
              <h4><?php print get_the_title(); ?></h4>
              <?php print get_the_excerpt(); ?><br />
              <a class="btn btn-default" href="<?php print get_permalink($post->ID) ?>">Details</a>
        </div> <!-- End individual project col -->
        <?php endwhile; ?>
    </div><!-- End Projects Row -->
</div><!-- End Container -->
<!-- ============ CONTENT END ============ -->

<?php get_footer(); ?>

And with that, you’ll have a fully functioning, content filtering portfolio page!