[Resolved] Filter a taxonomy by another taxonomy

[Author]

Posts

[Hector]

Hi,

I have two custom taxonomies:

1. Type (hierarchical taxonomy)
2. Size (flat)

I need to a View that displays "Sizes" (not posts but the Size taxonomy titles instead) which have posts tagged with both the Size AND the "Type".

For example, I have a list of "Types" that when clicked, pass a URL parameter (or any other mechanism you suggest, but I think the querystring would be the best solution?) which displays a list of Sizes. These should be filtered to only those which contain posts with BOTH taxonomies.

Then, upon clicking on a "Size" it should display the list of posts that match BOTH taxonomies again.

How do you suggest I could solve this?

Many thanks

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Hector

Can I check I have understood what you are aiming for?

To expand on your example, let's say Type may be any of "round", "square", or "triangular", and Size may be any of "Large", "Medium", or "Small".

You have posts jointly categorised by both Type and Size.

The final objective is to display posts that match the selected Type and Size, correct?

And your intention is to have the user first select Type (say, "square"), and then to see a list of Sizes, but to only show sizes which have posts that are also categorised by "square", e.g. to show "large" and "medium" which have matching posts but not "small" which doesn't. The user can then click on, say, "medium" to see a list of "square, medium" posts.

Does that sound right?

[Hector]

Hi Nigel,

Yes, I couldn’t have put it more clearly, thanks. That is spot on what I need.

(It is very odd that your support system does not allow responses by email, only web)

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Hector

Sorry for the late reply, I became unwell yesterday after replying to you.

I asked in my reply about your final objective because what you describe is essentially just a standard parametric search and is straightforward to implement. If you want something that looks different and is more of a step-by-step approach, you can do it but it is more complicated to implement.

I made a quick test site that has a custom post type Shapes with Types and Sizes taxonomies. I added a parametric search view that displays Shapes and has a filter for Types and another for Sizes. When adding my Sizes filter I indicated that it should only show terms that had posts.

For my loop output I am simply displaying the post title as a link, and you can see the crude results in the accompanying screen recording.

Select a Type, then the Size dropdown is populated only with Sizes for which there are matching posts.

See the documentation for creating parametric searches here: https://toolset.com/documentation/user-guides/front-page-filters/

If you are designing something more step-by-step then the tricky part in what you describe is displaying the Sizes for which there are corresponding posts that when clicked on takes you to a page listing posts matching Types and Sizes.

I helped someone do something similar before but the thread ran to 38 replies and in the end they reverted to using the parametric search, so I can certainly help you do that, but if the parametric search described above fits your needs then I won't overcomplicate things.

[Hector]

Hi Nigel,

The GIF is a cool support idea 🙂

Here's my use case:

I have the two taxonomies, lets follow your good example: Types and Sizes.
My users know they need certain type (e.g. a Circle) but they don't know the size until they see the thumbnail.
I will create an image custom field for the taxonomies, to represent them graphically.
I will list the thumbnails in a grid, first the grid for Types (a circle for the Circles taxonomy etc)
Then when they click, I will show a second grid, this time with the thumbnails of the different sizes (lets say Circles which they clicked in the previous step)
I need to only show the Sizes which have posts tagged as Circle and each size.
Only then will my users realize they need one size or another (hence it needs to be in steps)
Then, they click, say on "Large" and I will show all the posts: the Large Red Circle, the Large Green Circle, the Large Polka Dot Circle, etc

So yes it must be in steps and by clicking on thumbnails, rather than choosing a drop-down .

Is this feasible?

(hope you're feeling better)

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Hector

I'm just dipping in and out for a day or so, checking on my ongoing tickets, hope to be back to speed tomorrow.

Another screenshot, this time showing—again, very crudely—the functionality that you are aiming for.

Let me talk you through the steps, hopefully you can follow along and implement what you need for yourself.

The main trick we are going to employ here is to have a view which loops over all the Sizes but which doesn't directly output anything itself, but which is a container for a nested view which will check for matching posts with that size and which will output the size. Hopefully that will make more sense when we get to the end.

So:

1. I created a starting page to show my Types which is done via a simple View that displays all Types taxonomy terms without any filters (in my case it will list Triangle, Square, Circle).

The important bit is the Loop output which has the links to the next step and which looks like this:

<wpv-loop>
	<h2><a href="[wpv-post-url id='179']?wpvtypes=[wpv-taxonomy-slug]">[wpv-taxonomy-title]</a></h2>
</wpv-loop>

I am displaying the taxonomy term and linking to a page which I'm about to create in step 2 and for which I need the post id, and I'm adding the taxonomy slug as a url parameter to pass to the next step.

2. My next page is to display the Size terms (and I only want to display size terms if there are posts with that size AND with the type term selected in the first step).

So I create a View to add to this page which will loop through size terms which will act as a container for a nested loop and which will not directly output anything itself.

So, this View will display Sizes taxonomy terms, with no filters because we are going to loop over all the terms, except I leave the Query option "Don't show empty terms" checked because we can skip empty terms.

Here is my loop output:

<wpv-loop>
	<h3>[wpv-view name="shapes-step-3"]</h3>
</wpv-loop>

Note I am not outputting anything, I am using this query to call a nested query which I create in my next step.

3. Now I need a third View which will display posts of my Shapes custom post type.

At this stage we have a Type pre-selected in the first step and passed as a url parameter, and we are looping across all the Shapes.

For each iteration of the Loop we want to check if there are any matching posts, and if there are we will output, not the name of the post, but the name of the Size (and a link to our last step). Note that there could be multiple matching posts returned, but we don't want to output the Size each time, we only need it once, so for this View we will the Limit and Offset settings to display just 1 item.

We have effectively created a binary test for whether there are any matching posts or not.

Look at the attached screenshot "Step 3 View" to show the settings for the Query filter for this view.

Now here is how the loop output section looks. This is going to display the required Sizes terms with a link to a page (which we will make in the next step and for which we will need the post id) which passes both the Type and Size as url parameters.

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
		<wpv-loop>
          <h2><a href="[wpv-post-url id='184']?wpvtypes=[wpv-post-taxonomy type='types' format='slug']&wpvsize=[wpv-post-taxonomy type='size' format='slug']">[wpv-post-taxonomy type='size' format='name']</a></h2>
		</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
	[/wpv-no-items-found]
[wpv-layout-end]

Note I pasted the whole section here because I wanted you to notice that for the no-items-found block we are not displaying anything, otherwise for each of the non-matching terms we are looping through with our outer loop our inner loop would output something like "No posts found".

4. OK, last step. We need a page to display our results, and we are going to create a View to add to this page to do it.

So, this View will display our Shapes custom post type.

You can see the settings in the attached screenshot "Step 4 View" which shows the query filters added to use the url parameters passed in the previous step.

That does all the hard work. All I am doing in my loop output is showing the post titles with links, like so:

<wpv-loop>
	<h2>[wpv-post-link]</h2>
</wpv-loop>

You may need to re-read that but hopefully if you follow the steps yourself you should be able to recreate the functionality. Let me know if you have any problems implementing it.

[Hector]

Nigel, you are a WordPress Olympic Champion 🙂

It works perfectly well.

But here is the last curveball: I added a "term field" to the taxonomies, it is an image field, so that I can show them graphically and not by name.

In STEP 1 on the View that displays the Types taxonomy, I have no problem displaying this:

[types termmeta='featured-image' alt='[wpv-taxonomy-title]' title='[wpv-taxonomy-title]' size='thumbnail' align='none'][/types]

However in Step 3 where I list the Sizes, I can only display the taxonomy (with its optional flags 'name' | 'description' | 'slug' | 'count'). So the question is, can I display the term field? If I nest yet another view maybe?

Any pointers will be very welcome.

Thanks again Nigel

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

You shouldn't need to invoke another View.

Although they are not available via the GUI when editing the View, you can use the wpv-taxonomy-field shortcode and retrieve your term meta that way.

https://toolset.com/documentation/views-shortcodes/#wpv-taxonomy-field

It won't format the output so you need to create the <img> tag yourself, and you need to include the 'wpcf-' prefix when using your taxonomy term slug. So my edited loop output for step 3 which shows the term image (slug is 'size-featured-image') now looks like this:

<a href="[wpv-post-url id='184']?wpvtypes=[wpv-post-taxonomy type='types' format='slug']&wpvsize=[wpv-post-taxonomy type='size' format='slug']"><img src="[wpv-taxonomy-field name='wpcf-size-featured-image']"></a>

[Hector]

Nigel, you are a superstar.

Last thing, I need you to please do the following:

1. Print this screen
2. Show it to your boss
3. Tell him you are a superstar and do an awesome job
4. Demand a life-size bronze statue and the biggest office in the building
5. Ask him to issue a press release acknowledging you're a hero how many lives you save daily
6. Rinse and repeat

🙂

Thanks so much.