Sorting and Filtering With Isotope

If you create content in any system, you likely have ways of organizing them into, say WordPress Categories. This is nothing new under the sun.

But the typical organization is rather tree like, creating links to drill down, then out. There is an alternative interface, you have likely seen it. I’m not sure what the fancy design name is, but more or less all the information is present on a view, and you can click tabs/categories to filter them, all without leaving the page.

I’m working on an eCampusOntario project to try an organizational scheme like this, we like the interface on the UBC Arts ISIT Nifty Teaching Tools. The tabs let you filter the list of tools, they even animate sliding in and out. Nifty.

It’s also in play on the Berg Builds site, that presents a giant collection of domains of ones owns created by teachers and students at Muhlenberg College.

The UBC site is WordPress, Berg Builds is done with an HTML5Up template. The thing doing the work under the hood (and I know this because I Read Source HTML) is the jQuery Isotope library.

Just for fun, see what one can do with elements from the Periodic Table demo on the front page or the other examples of isotope in action.

I used something similar on my own (sorely needing an update) portfolio to present my work projects. This is a static HTML template… I think this one used some code called Mixitup (it came with the template).

I’ve been asked how one does this in WordPress. I have seen it bundled with visual themes, stuff one builds with Visual Bakery. I spent a chunk of time looking at a bunch of plugins… try looking for Grid Plugins, reviews like these. A bunch of them are pay for plugins.

For my project I need it to work with custom post types, and most of the ones I looked at that becomes a “Pro” feature. And the free ones I played with looked kind of … not pretty.

So I dug some more- I found a WordPress plugin in github, and sure it says [RETIRED] and it’s been there like 4 years, but why not give it a try? I think this is what’s in use on the UBC site.

While I do not have a public working demo, I did get it working on my local development … on a version of a TRU Writer SPLOT. The plugin has some options to select the post type, and how to filter, and it produces a shortcode, which can go into a page.

Keep in mind that these views are changing all without leaving the page or reloading. It is simply filtering.

On a SPLOT site this could possible replace the front page, if this was the way you wanted to organize the content.

I did find one thing I did not like with the plugin (and you can see it on the UBC site)- when you click a tab there is no visual indicator of the active view. If you notice in my GIF there is a light gray background for the active tabs, that is my little bit of added code, and I am able to do it without even editing the plugin.

So first we need in our style sheet something to indicate the color:

#filters li.fselected {
    background-color: #ededed;
}

That’s it!

Then you need to create and extra javascript script file that can sit in your theme directory (since I work with child themes, adding these are easy). This came pretty much from some answers in the usual place.

(function ($) {
	"use strict";

	$(function () {
	
		// set the first tab to be selected
		$( "#filters li" ).first().addClass("fselected");

		// Set up the click event for showing the selected tab
		// h/t https://stackoverflow.com/a/4901583/2418186

		$( "#filters li" ).click( function() {
			if( $(this).is('.fselected') ) {
				$(this).removeClass( "fselected" );
			}
			else {
				$( "#filters li.fselected" ).removeClass( "fselected" );
				$(this).addClass( "fselected" );
			}
		});
	});
}(jQuery));

It just adds the .fselected class to the first tab on loading (See All), and then it will remove it and add to any clicked tab after that. So I put this in a place on my child theme like js/tools.js and in my functions.php I just need to enqueue it.

add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_stuff');

function  mytheme_enqueue_stuff() {
    wp_enqueue_script( 'tools' , get_stylesheet_directory_uri() . '/js/tools.js', '' , '', TRUE );  
}

I’m liking I was able to improve the functionality without needing to hack the plugin (that might happen down the line).

But so far on my project I have it working smoothly on two different pages, working with custom post types and filtering by custom taxonomies.

Who needs PRO plugins?

---

Featured Image: Image by Thomas Wolter from Pixabay