In my ongoing use of FacetWP and Genesis, I ran into a case where I wanted to change the archive description content based on what sorts of options had been selected in the search. In part I wanted to remind visitors of what they’d picked, but also I wanted to easy to remove a search facet.

Before

In the beginning, the archive was a static thing:

Before any work was done - it says 'TV Shows' and lists how many.

This is intentionally boring. It lists the archive title, how many posts, and a description.

Filtering the Content

Since this is Genesis, the first step is to know how to filter at all. Since I’m only doing this on custom post types, I went with the very precise action and that is genesis_do_cpt_archive_title_description (aptly named).

I remove it and then add in my own:

remove_action( 'genesis_before_loop', 'genesis_do_cpt_archive_title_description' );
add_action( 'genesis_before_loop', 'DOMAIN_do_facet_archive_title_description' );

From here out, all the work will happen in the function DOMAIN_do_facet_archive_title_description which lives in my functions.php because it’s all theme specific.

What Gets Added

Now it’s time to decide what you want to add. I picked three things:

  1. Change the post count based on the results
  2. List the selections chosen
  3. Change the title based on the sort order

Those are two simple asks and one weird one.

Facet comes with the ability to display counts and selections:

  • facetwp_display( 'counts' );
  • facetwp_display( 'selections' );

The problem I had was that the counts were formatted in a way I didn’t like, so I quickly cleaned it up by filtering the result count:

add_filter( 'facetwp_result_count', function( $output, $params ) {
    $output = $params['total'];
    return $output;
}, 10, 2 );

That means the count and the selections can simply be tacked on to the description.

Adding the Sort Data

The hardest part was figuring out how to add the sort data. Since FacetWP uses a lot of javascript, I spent half an afternoon ranting to myself and trying to figure out how to do this in javascript. And then I did what I usually do when confused. I read the code.

As I read, I realized some of FacetWP’s magic is that they pass the GET parameters of the search over to javascript… And if they were doing that, then I could just use PHP to grab those parameters.

All I had to do was pass $_GET['fwp_sort'] into a variable.

The Code

Enough talk. Here’s the code:

function lwtvg_do_facet_archive_title_description() {

	$headline = genesis_get_cpt_option( 'headline' );

	if ( empty( $headline ) && genesis_a11y( 'headings' ) ) $headline = post_type_archive_title( '', false );

	$intro_text  = genesis_get_cpt_option( 'intro_text' );
	$count_posts = facetwp_display( 'counts' );
	$selections  = facetwp_display( 'selections' );
	$fwp_sort    = ( isset( $_GET['fwp_sort'] ) )? $_GET['fwp_sort'] : '';

	switch ( $fwp_sort ) {
		case 'most_chars':
			$sort = 'Number of Characters (Descending)';
			break;
		case 'least_chars':
			$sort = 'Number of Characters (Ascending)';
			break;
		case 'most_dead':
			$sort = 'Number of Dead Characters (Descending)';
			break;
		case 'least_dead':
			$sort = 'Number of Dead Characters (Ascending)';
			break;
		case 'date_desc':
			$sort = 'Date (Newest)';
			break;
		case 'date_asc':
			$sort = 'Date (Oldest)';
			break;
		case 'title_desc':
			$sort = 'Name (Z-A)';
			break;
		case 'title_asc':
		default:
			$sort = 'Name (A-Z)';
	}

	$headline    = $headline ? sprintf( '<h1 %s>%s Sorted By %s (%s)</h1>', genesis_attr( 'archive-title' ), strip_tags( $headline ), $sort, $count_posts ) : '';

	$intro_text  = $intro_text ? apply_filters( 'genesis_cpt_archive_intro_text_output', $intro_text ) : '';
	$intro_text .= $selections;

	if ( $headline || $intro_text ) printf( '<div %s>%s</div>', genesis_attr( 'cpt-archive-description' ), $headline . $intro_text );
}

You’ll notice that I’ve kept in all the regular Genesis filters. This was so that my theme can take advantage of whatever magic Genesis invents down the line.

How It Looks

Now the default looks like this:

Default view, before sorting

And after you’ve picked a few options, it changes to this:

After Sorting

If you click the little x’s on the side of the selections, they’re removed.

There’s still room for design improvement, but remember folks. Release and iterate.

Reader Interactions

%d bloggers like this: