A colleague of mine and I are working on lightweight faceted browsing for a stakeholder. Faceted browsing, or faceted search, is a feature in which large sets of information can be filtered by the user along different facets, or dimensions, typically in an additive way. Online retail catalogs do this all the time: Show me all the shoes; now show me the blue shoes; now show me the blue Adidas that cost less than a hundred dollars.
If you want to see only the tutorials that have to do with Bluemix in a large library of information, in an example closer to what we’re actually working on, then you’re faceting the information along type, tutorial, and topic, Bluemix. Show me the tutorials; now show me the tutorials that are about Bluemix. Information developer types are sometimes too eager to introduce this kind of fanciness, in my opinion, but it can help you get around in large libraries where there are lots of different types of things, lots of different dimensions.
This blog ain’t a library and I’m just kind of fooling around here, but WordPress has some nice built-in features that make coding facets easy. You don’t have to do much more than fool around. The main feature is that the function post_class() automatically puts all kinds of useful metadata into place in your archive views, metadata that you can then use to select and filter across facets right out of the box.
When in an archive you create items that include post_class(), as in the example below, you’re creating really useful selectors, as you’ll see.
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
…becomes this in the HTML putput:
<article id="post-294"
class="post-294
post type-post status-publish
format-standard hentry
category-place category-tech
tag-ilm tag-ai
tag-artificial_intelligence
tag-event tag-local"
style="display: block;">
Bonanza! All of these class attribute values say different things about the referenced content. What categories is the post a part of? How has it been tagged? What type is it (post)? What status does it have? You see how great that is? WordPress is hanging all this stuff off of the list view, which you can then manipulate in JavaScript without going back to the server: Show me all the content in a single page, but put some jQuery in to let me show and hide along the facets I’m interested in. This is what I’ve done in a crude way with this blog’s posts on this page:
Demo: Facetator
The jQuery selection code is really simple:
$(document).ready(function(){
$(".cat-item").click(function(){
var $target_cat = "category-" + $( this ).attr("class").split(" ")[1];
$("article").not("."+$target_cat).hide(1000);
$("."+$target_cat).show(1000);
});
$(".tag-item").click(function(){
var $target_tag = "tag-" + $( this ).attr("class").split(" ")[1];
$("article").not("."+$target_tag).hide(1000);
$("."+$target_tag).show(1000);
});
});
The first chunk says, “When someone clicks on a category in the nav, find what category it’s referring to and show the articles so categorized; hide the others.” These functions are responding to this basic navigation in the page:
<div class="bh-leftnav">
Categories
<ul>
<?php
$categories = get_categories();
foreach ($categories as $category) { ?>
<li><a href="#" class="cat-item <?php echo strtolower($category->name); ?>"><?php echo $category->name; ?></a></li>
<?php } ?>
</ul>
<br/>
Topics
<ul>
<?php
$tags = get_tags();
if ($tags) {
foreach ($tags as $tag) { ?>
<li><a href="#" class="tag-item <?php echo strtolower($tag->name); ?>"><?php echo $tag->name; ?></a></li>
<?php } } ?>
</ul>
</div>
You just have to put the post_class() on the listed posts, as in the first example above, and you’re slicing away at the differently faceted content on the page. Now, the jQuery examples here don’t make this filtering progressive, they just select along the different dimensions represented by the navigation. But you can see how easily they might do so. In fact, instead of using get_tags(), which gets all the tags being used in the site, you could use get_the_tags() (in which case you’d refresh the page for that new nav), or you could actually toggle the tags listed with JavaScript according to which remained in the selected category above. Lots of ways to build this out but such a nice WordPress base for doing so.
The source code for the page is here (the whole thing is a template applied to an otherwise empty page): facetator.php.txt